I created a realtime chart that updates about every 10 seconds by adding a new value and removing an old one.
I'm a bit unhappy about the chosen ticks of the time axis. Every 10 Minutes is fine, but I'd prefer values like 15:50,16:00,16:10. I looked around the documentation time axis but did not find anything promising.
My definition of my xAxes looks like:
xAxes: [
{
gridLines: {
display: true
},
type: "time",
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
}
},
ticks: {
min: 0,
max: this.datapoints.length,
autoSkip: true,
maxTicksLimit: 10
}
}
]
I tried to loop over the dataset and find the 'first pretty time' object and set this object as my ticks.min object. But this did not work.
OK I found it. The property is in the time attribute:
time: {
unit: "minute",
unitStepSize: 10,
displayFormats: {
minute: "HH:mm"
},
min: firstprettyTime, // <- moment js object
},
All praise to this guy's answer.
Related
Example
I am trying to use the autoSkip feature found here in the chart.js documentation:
https://www.chartjs.org/docs/latest/axes/cartesian/?h=autoskip
The issue I am having is my x-axes labels are overlapping (see above example).
Everything I have read says this autoSkip feature should automatically skip overlapping labels. However, when setting this to both true or false, nothing seems to change in my chart.
<Line
data={this.state.chartData}
options={{
elements: {
point: {
radius: 2
}
},
tooltips: {
mode: 'nearest',
intersect: false
},
scales: {
yAxes: [{
ticks: {
stepSize: 1, //sets the interval that our y axis counts by
beginAtZero: false, //starts our graph at 0 if true
},
gridLines: {
drawOnChartArea: false
}
}],
xAxes: [{
ticks: {
minRotation: 88,
autoskip: true,
autoSkipPadding: 50
},
gridLines: {
drawOnChartArea: false
},
type: 'time',
distribution: 'series',
time: {
unit: 'day',
displayFormats: {
day: 'MMM D',
},
tooltipFormat: 'MMM D h:mm a',
},
},
]
},
responsive: true, //lets us resize our chart
maintainAspectRatio: true, //lets us resize our chart
}
}
/>
In case anyone is wondering, please update to 2.9. Confirmed that the issue is resolved there.
https://github.com/chartjs/Chart.js/issues/6591
I noticed your autoskip is in lower case where in the documentation its in camlcase (ie. autoSkip) - from my experience with Chartjs, I've found that it might make a difference to try and fix that and see if that does the trick
You could try changing
distribution: series
to
distribution: linear
It looks to me like its trying to space the data evenly, despite the fact that you're missing data for 3 days (the weekend maybe?). It really shouldn't break your labels... but I bet the labels know there's enough space for n labels on the graph, but they don't realize that three of the labels are being squished together.
The default distribution is linear, so you could also just remove it. (https://www.chartjs.org/docs/latest/axes/cartesian/time.html#scale-distribution)
For anyone wondering, a chartjs dev has replied to my post here: https://github.com/chartjs/Chart.js/issues/6591
Looks like there are some issues in the current Chart.js version. Should be fixed in 2.9.
I am using highcharts/highstock and I send some data to the client.
I tried various sets of settings, but I cannot force x axis to stop on a certain date.
For example, I create a chart that has data from 20/3/2019 to 25/3/2019. The interval must always be 5 minutes.
The starting point is correct, it starts in 20/3/2019.
But the last point is always a day more. Its about 35 more points of 26/3/2019, instead of stopping at 25/3/2019.
*if this changes anything, the starting point should be 20/3/2019 00:00 , but it actually starts at 20/3/2019 03:00 in highcharts.
My data are
{
time:{
useUTC:false
},
boost: {
enabled: true,
allowForce:true,
usePreallocated:true,
useGPUTranslations: true
},
chart: {
type: "line",
zoomType: 'x'
},
title: {
text: item.title
},
xAxis: {
type: 'datetime',
tickInterval: 5 * 60 * 1000 , /*5 min */
max: pointStop,
labels: {
format:'{value:%H:%M:%S}'
},
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%b. %e',
week: '%b. %e',
month: '%b. %y',
year: '%Y'
}
},
yAxis: {
title: {
text: item.title
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false
},
series: [
{
boostThreshold: 150,
name: item.title,
pointStart: pointStart,
pointInterval: 5 * 60 * 1000,
data: item.array,
dataGrouping:{
approximation: 'average',
enabled:true,
forced:true,
groupAll:true,
groupPixelWidth:20
}
}
]
}
What am I doing wrong?
Thanks
It sounds like an issue setting the tick count. The documentation states
If a tickAmount is set, the axis may be extended beyond the set max in order to reach the given number of ticks. The same may happen in a chart with multiple axes, determined by chart. alignTicks, where a tickAmount is applied internally.
You need to disable oridinal option, which is enabled by default in Highstock:
xAxis: {
ordinal: false,
...
}
Live demo: http://jsfiddle.net/BlackLabel/6rqcLhp0/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I'm using chart.js to generate a line chart. I want to visualise the data by month, seconds, minutes etc.(change the xAxis accordingly) When I change "month" to "second" the browser crashes.. Almost anything but month works correctly
xAxes: [{
fontColor: 'orange',
type: 'time',
distribution: 'linear',
time: {
unit: 'month',
displayFormats: {
second: 'h:mm:ss a'
}
},
CodePen:
https://codepen.io/anon/pen/oJmrpw
So I'm trying to create a simple chart using chart.js. The chart consists of price values for the y-axis and time values for the x-axis. The data is fetched from an API.
The y-axis value are displayed properly, but for the x-values they appear condensed. These are the options I'm passing into the chart:
options: {
title: {
display: false
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
ticks: {
source: 'data',
autoSkip: true,
autoSkipPadding: 50
},
time: {
parser: 'HH:mm',
tooltipFormat: 'HH:mm',
unit: 'minute',
stepSize: 10,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
}
}
}],
yAxes: [{
type: 'linear',
ticks: {
beginAtZero: false,
callback: function(value, index, values) {
return '$' + value;
}
}
}]
}
}
I've tried adjusting the step size, but it's not working. For some strange reason, the first label on the x-axis is 15:14 no matter how much I change the data. What could be the issue?
The full code can be found here.
Thanks in advance.
Seems parser doesn't really work well with. simply remove parser in the option, you can see the clear result.
time: {
//parser: 'HH:mm',
tooltipFormat: 'HH:mm',
unit: 'minute',
stepSize: 10,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
}
}
Im creating a chart with chart.js v2 and I have a good working graph which uses a time scaled axis. Now I want to show whole hours in the axis so I set the option like this:
xAxes: [{
type: 'time',
time: {
unit: 'hour',
unitStepSize: 1,
displayFormats: { 'hour': 'H:mm' }
}
}]
This works good but I have gaps at the beginning and end of the graph.
How can I make it fit like this:
Codepen:
http://codepen.io/WilbertE/pen/wzRmWr
You want to use the min & max attributes of the time property :
options: {
scales: {
xAxes: [{
type: "time",
time: {
min: /* Set your min here .. */,
max: /* .. and your max here*/
}
}]
}
}