Develop Reference

Chart.js Thick label gets replaced by three dots

How can I display full thick label? It always gets cut off and replaced by 3 dots.
I've been trying various options from https://www.chartjs.org/docs/master/axes/index with padding and similar, but I can't find this. Full date data is there.

You are using a previous version of Charts.js. With Charts.js >2.0 axis label should grow as much as needed to display the full date unless you override the label function like done here.
Demo: https://codepen.io/adelriosantiago/pen/wvooQRR?editors=1010
Date format can be changed in options.scales:
xAxes: [{
type: "time",
time: {
unit: 'hour',
unitStepSize: 0.5,
round: 'hour',
tooltipFormat: "h:mm:ss a",
displayFormats: {
hour: 'Y MMMM D, H:M:S A'
}
}
}]

Highcharts - cannot force x axis to stop on a certain date

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

Create ticks at certain time positions on a chartjs cartesian time axis

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.

'Chart.js' time chart not displaying properly

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'
}
}

chart.js v2 - how to 'fill' the graph when using time scale

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*/
}
}]
}
}