score:0
The labels
array and the data
array have to match.
Therefore what you will need to do is calculate your values to be hold in data array in to match your labels
data: {
labels: ["Jan", "Feb", "March", ...],
datasets: [{
label: '# of Votes',
data: [01, 02, 03, ...],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
...
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
...
],
borderWidth: 1
}]
},
Does that solve your doubt?
score:0
This question is quite old now, but I have found a workaround using the afterTickToLabelConversion
functionnality. I formatted the date, and left only one label for every month (the rest of the labels are transformed to empty quotes).
Here is the snippet to put in your graph option :
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
time: {
displayFormats: {
'day': 'MM/YY'
},
tooltipFormat: 'DD/MM/YY',
unit: 'day',
},
// leave only one label per month
afterTickToLabelConversion: function (data) {
var xLabels = data.ticks;
var oldLabel = "";
xLabels.forEach(function (labels, i) {
if(xLabels[i] == oldLabel){
xLabels[i] = "";
} else {
oldLabel = xLabels[i];
}
});
}
}]
}
score:12
Just config your xAxes->time property as:
unit: 'month'
xAxes: [{
type: 'time',
position: 'bottom',
time: {
displayFormats: {'day': 'MM/YY'},
tooltipFormat: 'DD/MM/YY',
unit: 'month',
}
}],
Source: stackoverflow.com
Related Query
- ChartJS - Draw chart with label by month, data by day
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- Use multi data to draw chart with chartjs
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJs line chart - display permanent icon above some data points with text on hover
- Custom data in label on ChartJS pie chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- How to display chart using Chartjs with JSON data in Laravel
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Real-time line chart with ChartJS using Ajax data
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Two data sets with different time instances on the same ChartJs chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chartjs Polar Area Chart - Data labels shown don't rotate with startAngle
- Draw stacked horizontal bar chart with Average line using ChartJS
- Insert value into a ChartJS with different data label
- Chartjs create chart with big data and fixed labels
- Chartjs line chart gets all scrambled up when an x value coincides with a label
- chartjs output data in month week and day
- How can I build some chart with Chart.js and ng2-charts using an array of revenus & budgets per month date as Data source?
- How do I draw horizontal bars with a label using either ChartJS or D3?
- Chartjs Bar Chart showing old data when hovering
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- line chart with {x, y} point data displays only 2 values
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to fix chart Legends width-height with overflow scroll in ChartJS
More Query from same tag
- Remove tooltip if has no label
- Does the chartjs supports localization?
- ChartJS multiple annotations (vertical lines)
- Line is rendering only vertical line instead of sloped line
- Chart.js 2.9.4 - error using bundle from CDN - "chart is not defined"
- ChartJS Zoom Granularity
- Populating a chartJS with data from API through axios (VueJS)
- Chart tooltip should show the consolidated information of a single bar in double bar chart
- Some bars of the bar graph are disappearing from Chart.js
- React Native Chart not showing data
- How to hide the tick marks of the axis in react-chartjs-2
- Complete border on ChartJS bars
- Chart.js: load new data on click
- Creating charts dynamically using ChartJS and AngularJS
- How to make one datefilter for multiple charts on one webpage?
- Understanding Chart.js and Adding Legends to Pie Charts
- Chart.js displays the label in a weird font in IE8
- I´m unable to map elements of an array
- Chartjs - show elements in all datasets on hover using bar chart
- Angular 6 ChartJS create canvas dynamically and create graph on it - an example?
- Is this graph possible using chart.js?
- chartjs datalabels not showing anything with django template
- How can I avoid NaN on pie chart label in Chart JS
- chart.js pie chart - how to update dataset with smooth transition
- ChartJS - Finding the minimum and maximum labels that are inside a pan (When zooming)
- Replace Chart.js Data during `onClick` causes _meta error
- Multiple charts in one page - Chartjs
- HTML file won't generate anything on webpage using Chart.js
- How to pass model object to javascript function in asp.net Core
- Chart JS: All Values Displayed on x-axis After Callback Conversion