score:6
after struggling with this same issue myself for longer than i should have, i finally noticed the fine print in the chartjs documentation at http://www.chartjs.org/docs/#scales-time-units the unitstepsize parameter needs to be defined in the time sub options.
i was doing:
scales: {
xaxes: [{
type: "time",
time: {
unit: 'day',
displayformats: {
day: 'mmm dd',
},
},
ticks: {
fontcolor: "black",
fontsize: 12,
fontstyle: "normal",
fontfamily: "segoe ui",
},
unitstepsize: 7,
}],
yaxes: yaxes
},
when i should have been doing:
scales: {
xaxes: [{
type: "time",
time: {
unit: 'day',
displayformats: {
day: 'mmm dd',
},
unitstepsize: 7,
},
ticks: {
fontcolor: "black",
fontsize: 12,
fontstyle: "normal",
fontfamily: "segoe ui",
},
}],
yaxes: yaxes
},
in a broader context: (note that elechart1 is the canvas dom element of the chart, and that yaxis, datasets, and chartname are objects/variables built outside of the example.)
var chart1 = new chart(elechart1, {
type: 'line',
linewidth: 15,
data: {
datasets: datasets,
},
options: {
showpointlabels: true,
legend: {
display: true,
//position: "bottom"
},
title: {
display: true,
text: chartname,
fontsize: 18,
fontstyle: "bold",
fontfamily: "segoe ui"
},
scales: {
xaxes: [{
type: "time",
time: {
unit: 'day',
displayformats: {
day: 'mmm dd',
},
unitstepsize: 7,
},
ticks: {
fontcolor: "black",
fontsize: 12,
fontstyle: "normal",
fontfamily: "segoe ui",
},
}],
yaxes: yaxes
},
}
});
bottom line: once i put the unitstepsize option in the time object, it worked as expected.
Source: stackoverflow.com
Related Query
- Time scale formatting issues with chartjs, mostly unitStepSize
- UnitStepSize for regular time interval with Chartjs
- Issues with Moment and ChartJS Time Format Parsing
- ChartJS Bar chart with time scale - Bars overlap with each other
- How to prevent first/last bars from being cut off in a chart with time scale
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- chart.js v2: Align time scale labels with the center of the bars
- react-chartjs-2 time scale dates not formatting
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- Chartjs Custom Legend with Time on Y-axis
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- How to set a time scale to a ChartJS chart from JSON?
- chart.js time scatter with true scale
- ReactJs issues with setstate on array in ChartJs
- How to write better code in es6 for formatting an object with array values
- Chart.js -- using update() with time scale datasets
- chartjs plot datetime value with time offset on the grid
- chart.js wide bar with time scale
- Updating Chartjs to 2.5 with custom code
- Two data sets with different time instances on the same ChartJs chart
- How to display multiple graphs in real time with chartjs
- ChartJS scale ticks with scatter plot
- Having issues with running npm start after installing chartjs
- How to display a progress over time in one horizontally stacked bar with chartjs
- ChartJS with React: Only one value showing on time chart
- ChartJS - Issues with positioning and viewing various components of horizontal bar
- ChartJS Tooltips with time axis and multiple datasets
- White space at start and end of data with time scale in chart.js
- Time scale with single object - bar isn't centered (chart.js)
More Query from same tag
- How to dynamically set ChartJs line chart width based on dataset size?
- Chartjs not picking up twig variable for label
- CHART.JS How can I offset/move/adjust the labels on the y-axis to be in the middle of the gridlines instead of centered on the gridlines?
- Different gridline steps on chart js line chart
- How can I pass my sqlite data to django, and make chart?
- cartjs tooltips displays in the wrong place on a chart
- How to remove rectangle box next to the legend text in Chart.js
- Chart won't draw. Returning a string value not a Number value - Meteor - Chartjs
- Charts.js - Bubble chart with two word axis
- How to plot an equation using ChartJS?
- create Chart using Chartjs and PHP
- How to use chart.js for financial with dynamic CSV data?
- chartjs - Not taking the height in reponsive chart
- Overwrite Default ChartJS Variables with Webpack
- Django chart.js multi axis line chart
- Dynamically Creating Json Array Javascript
- How to use php variables in a chart js chart
- Angular + Ng2 Charts: Chart not displaying as Child Component
- $(...).getContext("2d") is not a function when using chart.js
- Grab array from div text to plot with ChartJS
- Cannot change font color and box width in chart
- How to create multi scale chart?
- Chartjs add and remove data
- Problems with max and min value of Chart.js [line chart]
- Chart.js onAnimationComplete doesn't work
- Can we have number value on the top of charts bars.?
- Hide or show two datasets with one click event of legend in chart.js
- How to invert scale display on radar chart (chart.js)
- Create ticks at certain time positions on a chartjs cartesian time axis
- Set labels from array