score:154
Accepted answer
Yes, you can provide multiple data sets using the datasets
property, which is an array of containing groupings of values. Each data set contains a series of values in data
that correspond to the labels
.
See two slightly different examples below depending on your version of Chart.js.
Chart.js v1.x
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
fillColor: "blue",
data: [3,7,4]
},
{
label: "Red",
fillColor: "red",
data: [4,3,5]
},
{
label: "Green",
fillColor: "green",
data: [7,2,6]
}
]
};
var myBarChart = new Chart(ctx).Bar(data, { barValueSpacing: 20 });
See this JSFiddle.
Chart.js v2.x
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
backgroundColor: "blue",
data: [3,7,4]
},
{
label: "Red",
backgroundColor: "red",
data: [4,3,5]
},
{
label: "Green",
backgroundColor: "green",
data: [7,2,6]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
See this JSFiddle.
Source: stackoverflow.com
Related Query
- ChartJS add tooltip to a grouped bar chart
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- chart js data-point between bar charts
- How to show gradient vertically on chart js grouped bar chart?
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Grouped Bar Chart ChartJS
- Equal distance grouped bar chart irrespective of scale - chart.js
- Set fixed label size for grouped bar chart in angular Chartjs
- Unable to create Stacked Grouped Bar Chart with chart.js / react-chartjs-2 in React
- Grouped bar charts each group different level in chart.js
- ChartJS: Grouped Stacked Bar Chart not Grouping
- Using ChartJS to create a multiple grouped bar chart - see picture below
- ng2 charts bar chart need spacing between 2 bars in series Angular
- chartjs add dots to bars in grouped bar chart
- Bar chart is not grouped properly in chartjs
- Pie Chart using chart.js not showing up but bar charts are?
- Grouped bar chart having each group with different data using chart.js
- Chart.js - Multiple bar Charts - Only Show Last Chart
- How to display grouped bar chart using chart.js?
- Grouped bar charts with intersecting ticks
- Grouped bar chart with label in Chart.js
- Stack grouped xAxes in bar chart
- How is it possible to make curved bar chart or curved column charts in chart.js?
- how to not repeat code while creating multiple charts in chart js
- Grouped Bar Char in D3.js or Google Charts or Chart.js
- Grouped bar charts, in chart.js
- chart js 2 how to set bar width
- Chartjs Bar Chart showing old data when hovering
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart.js: Bar Chart Click Events
More Query from same tag
- Change point size and color on hover in chartjs
- is there a way to change the date format in php?
- VueJs and ChartJs - Chart is responsive in width, but not height?
- ChartJS "half donut" chart not displaying properly
- Sort a Chart from Lowest to Highest Value in Chart JS
- Pie chart with Chart.js and mySQL
- How to hide other section of chartjs on click of lengend
- GWT Chart.js implementation throws 'unable to get property 'insertBefore' of undefined or null reference
- Floating clone does not show in chrome if dragged element contains a chartjs component
- Setting ticks of Chart.js in html.erb file
- charts.js chart size it's diferente than container setted size
- Chart JS Displays Only Bigger Dataset But Has Both Datasets?
- I get to do scroll
- Chartjs inverted bars when negative value
- Popup windows for histogram with AngularJS
- Chart.js remove zero value sector in pie chart
- Cannot read property 'length' of undefined for ChartJS when I use it inside React
- Render Javascript in DOMPDF is not working as expected
- Convert PHP array to chart.js compatible data
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- My choice of color is not used in my stacked bar chart
- Fade other lines when hovering legend in Chart.js
- Can I add some variables to my chart.js in page know that variables?
- React COREUI CChart problem not rendering
- Show gridlines over graph in chart.js, show bold x-axis label in chart.js, mixure of intersecting graph colors in chart.js
- chart.js display even intervals between two dates and adding label to y axes
- Chartjs : showLine depending on value
- 'scales' option appears to break Chart.js graph
- Formatting axis labels using ChartsJS
- ChartJS in React throws 'too may re-renders'