We Keep Coding

Chart.js timeseries x ticks overlapping due to weekend

I use Chart.js to plot a line chart. My x axis is a timeseries.
However, I have ticks overlapping due to weekend data.
Is there any way to avoid overlapping ticks? I used "autoskip: true" but it doesn't seem to work.
Here's how my configs look like:
x: {
parsing: false,
type: "timeseries",
time: {
displayFormats: {
second: "HH:mm",
minute: "HH:mm",
hour: "HH:mm",
day: "MMM d",
},
tooltipFormat: "d MMM HH:mm",
},
grid: {
display: false,
},
ticks: {
autoskip: true,
},
},
And this is how the overlapping looks like:

You can achieve what you're looking for by writing a callback function that checks if the value is a weekend day
new Date(Date.parse(value)).getDay() == 1 || new Date(Date.parse(value)).getDay() == 2
If it is we just don't return it. Otherwise we return the value without changes.
This is how your config should look like:
x:{
type: 'timeseries'
time:{
unit:'day',
},
ticks:{
callback: function(value){
//if weekend dont return the tick label
if(new Date(Date.parse(value)).getDay() == 1 || new Date(Date.parse(value)).getDay() == 2 )
return
return value
}
}
}

How to plot date/time on X but display only dates in Chart.js?

I have a series of data points, each for a specific date/time. The time between each point varies, and the range covers several days (up to 30 days). There may be multiple points per day, or there may be days with no data points.
I would like the X scale to show the dates (with day of week), and for the data points to be plotted where they should go based on both the date and time of day. For instance, 2018-02-15 12:00:00 would be half-way between the labels for 02-15 and 02-16.
Here is some sample code/data:
var chartData = {
type:'line',
data: {
datasets: [
{
label:'Depression',
backgroundColor:'#00f',
borderColor:'#00f',
data:[
{y:3,t:Date.parse('2018/02/20 05:01:16')},
{y:4,t:Date.parse('2018/02/20 15:03:09')},
{y:5,t:Date.parse('2018/02/21 05:04:09')},
{y:1,t:Date.parse('2018/02/21 08:06:09')},
{y:5,t:Date.parse('2018/02/22 05:05:09')},
],
fill:false,
},
{
label:'Anxiety',
backgroundColor:'#d0d',
borderColor:'#d0d',
data:[
{y:6,t:Date.parse('2018/02/20 05:01:16')},
{y:2,t:Date.parse('2018/02/20 15:03:09')},
{y:4,t:Date.parse('2018/02/21 05:04:09')},
{y:6,t:Date.parse('2018/02/21 08:06:09')},
{y:3,t:Date.parse('2018/02/22 05:05:09')},
],
fill:false,
},
{
label:'Activity',
backgroundColor:'#f90',
borderColor:'#f90',
data:[
{y:4,t:Date.parse('2018/02/20 05:01:16')},
{y:1,t:Date.parse('2018/02/20 15:03:09')},
{y:4,t:Date.parse('2018/02/21 05:04:09')},
{y:7,t:Date.parse('2018/02/21 08:06:09')},
{y:3,t:Date.parse('2018/02/22 05:05:09')},
],
fill:true,
},
{
label:'Physical Health',
backgroundColor:'#ffc',
borderColor:'#cc0',
data:[
{y:-2,t:Date.parse('2018/02/20 05:01:16')},
{y:-3,t:Date.parse('2018/02/20 15:03:09')},
{y:-2,t:Date.parse('2018/02/21 05:04:09')},
{y:-6,t:Date.parse('2018/02/21 08:06:09')},
{y:-5,t:Date.parse('2018/02/22 05:05:09')},
],
fill:true,
},
],
fill:false,
},
'options': {
responsive:true,
title:{
display:true,
text:'Recent History',
},
scales: {
xAxes:[{
display:true,
time: {
min:Date.parse('2018/02/01 00:00:00'),
max:Date.parse('2018/03/01 00:00:00'),
displayFormats:{
day:'ddd MM/DD',
},
unit:'day',
round:'day',
},
distribution:'linear',
scaleLabel: {
display:true,
labelString:'Date'
},
bounds:'data',
ticks: {
source:'data',
},
}],
yAxes:[{
display:true,
scaleLabel:'Rating'
}]
},
}
};
The code above only displays the first two data points in each series.
Thanks!

http://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source
http://www.chartjs.org/docs/latest/axes/labelling.html#scale-title-configuration
You could try changing
ticks: {
source:'data',
},
... to source:'auto' which auto-truncates tick labels for you, and just see what that looks like ...
The time-scale display format for X-axis is described here, so you can format it to whatever Moment.js time format you want, e.g. 'YYYY-mm-dd:
xAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}]
... Though it looks like maybe you have that in there already. Is it not showing any x-axis ticks? Is it showing any errors?
Or you could try following this example to override the callback method for a custom 'tick' if you want to include something besides the date/time. Their example was to append a dollar sign before all the values. If you only want to deal w/date-time then the above solution ought to be enough.

Problems with max and min value of Chart.js [line chart]

I want to create a small graph with just a line.
When I first created I didn't see a big different between the start point and the end point. So I tried to the set the smallest value the same as the min-val. And the biggest value as the max-val on my yAxes.
Here is my code:
var generateNormalChart = function (dataForNormalGraph, randomColors, theLongNameOfTheCoin,currency,exchange,minVal,maxVal,stepsize) {
var ctx = document.getElementById('normalChartGraph' + theLongNameOfTheCoin + currency + exchange).getContext('2d');
var normalChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
fill: false,
borderColor: randomColors,
data: dataForNormalGraph,
pointRadius: 1,
borderWidth: 2
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes:[{
display: false,
ticks: {
max: maxVal,
min: minVal
// stepSize: stepsize
}
}]
}
}
});
};
An example of data I use:
This is the maxVal: 0.0000505
This is the minVal: 0.00005483
This is dataForNormalGraph:
0:0.00005162
1:0.00005124
2:0.0000505
3:0.00005056
4:0.00005089
5:0.0000509
6:0.00005102
7:0.00005067
8:0.00005087
9:0.00005156
10:0.00005173
11:0.00005191
12:0.00005363
13:0.00005276
14:0.00005309
15:0.00005297
16:0.00005231
17:0.00005243
18:0.00005252
19:0.00005271
20:0.00005326
21:0.00005408
22:0.00005483
23:0.00005376
24:0.00005365
Like you can see I commented the step value.
I even tried it with that by calculating the difference between ((the max and min val) / 25) and that was : 1.7320000000000004e-7
I also don't want to see the labels and the Axes value because it takes to much space.
I have 2 photo's like you can see he ignores the max and min val:
What I want but then with the right max and min values

I forgot to give the yAxes values what didn't resulted in a good chart.
The only thing I need to do was to add the
labels: nameOfTheCoins,
so the yAxes have a value

Chartjs X axis label and tick formatting

I am using Chartjs to display a time series line graph.
My setup is as following...
this.chartSetup = {
type: 'line',
data: {
labels: this.times,
datasets: [{
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
label: title,
data: this.vals,
pointRadius: 0,
}]
},
options: {
spanGaps: true,
legend: {
position: 'bottom',
labels: {
boxWidth: 10
}
},
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
stepSize: 6,
unitStepSize: 5
},
type: 'time',
time: {
displayFormats: {
hour: 'h:mm a',
minute: 'h:mm a',
}
}
}],
},
}
};
Chart.defaults.global.animation.easing = "easeOutBounce";
this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);
My chart looks like the following screen shot
The data is Date for the X axis (Labels), and just numbers for the Y.
The time data goes from 6am to 6pm (12 hours worth)
I have a couple of issues here all relating to the X axis label formatting.
The initial 6am label is being cut off
How can I change the X axis label rotation (so perhaps by 90 degrees will fix the truncated first value)
My data goes to 6pm, but it is showing an extra X axis value (7pm). Can I get rid of this?
Thanks in advance for any suggestions here.

What worked for me was setting
autoskip: true
autoSkipPadding: 30
in the tick configuration.

1,2 - set minRotation = 90
3 - set Max value on your x axes

How can I label days of month?

In HighCharts JS, how can I label the days of the month (ie label the blue bars) with the day of the month under each bar as shown in the following graph (shown in the JSFiddle below). At the moment, HighCharts skips labelling some days. My customer would prefer them to be labelled as consecutive/continuous numbers.
The JS Fiddle for HighCharts is here: http://jsfiddle.net/vecbtw7m/
JavaScript code for HighCharts:
$('#graphContainer2').highcharts({
chart: { type: 'column' },
title: { text: 'Monthly Page Views' },
xAxis: {
type: 'datetime',
title: { text: 'Date' },
min: new Date('2015/10/15').getTime(),
max: new Date('2015/10/30').getTime(),
},
yAxis: {
min: 0,
title: { text: 'Page Views' }
},
series: [{
name: 'Page Views',
data: [
[Date.UTC(2015,9,15), 27], [Date.UTC(2015,9,17), 54],
[Date.UTC(2015,9,20), 42], [Date.UTC(2015,9,24), 13]
]
}]
});
Desired result (in yellow)

You can add label formatter function in xAxis :
xAxis: {
type: 'datetime',
title: { text: 'Date' },
min: new Date('2015/10/15').getTime(),
max: new Date('2015/10/30').getTime(),
tickInterval: 24 * 3600 * 1000,
labels:{
formatter: function () {
return Highcharts.dateFormat('%d', this.value);
}
}
}
Update jsFiddle

It comes down to a combination of two things:
tickInterval
pointRange
Setting both the point range and the tick interval to one day, the axis is aligned and formatted as you describe.
Example:
http://jsfiddle.net/jlbriggs/9cL3z64n/
Adding additional formatting to the labels can clean it all up, otherwise the labels get pretty sloppy.

You can use tickInterval option for the x axis.
Ref:
The interval of the tick marks in axis units. When null, the tick
interval is computed to approximately follow the tickPixelInterval on
linear and datetime axes. On categorized axes, a null tickInterval
will default to 1, one category. Note that datetime axes are based on
milliseconds, so for example an interval of one day is expressed as 24
* 3600 * 1000.
On logarithmic axes, the tickInterval is based on powers, so a
tickInterval of 1 means one tick on each of 0.1, 1, 10, 100 etc. A
tickInterval of 2 means a tick of 0.1, 10, 1000 etc. A tickInterval of
0.2 puts a tick on 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 etc.
If the tickInterval is too dense for labels to be drawn, Highcharts
may remove ticks.
Code:
xAxis: {
type: 'datetime',
title: { text: 'Date' },
min: new Date('2015/10/15').getTime(),
max: new Date('2015/10/30').getTime(),
tickInterval: 1
},
Result:
Demo: http://jsfiddle.net/jpnL65js/
EDIT
Because of the note:
If the tickInterval is too dense for labels to be drawn, Highcharts
may remove ticks.
you have to use another way, so use tickPositioner function and force the ticks to display.
Ref:
A callback function returning array defining where the ticks are laid
out on the axis. This overrides the default behaviour of
tickPixelInterval and tickInterval. The automatic tick positions are
accessible through this.tickPositions and can be modified by the
callback.
Code:
tickPositioner: function () {
var result = [];
for (i = 15; i < 31; i++)
result.push(Date.UTC(2015, 9, i));
result.info = {
unitName: "day",
higherRanks: {}
};
return result;
}
Demo: http://jsfiddle.net/ezpo47ua/
Result: