score:-1
This should work as per your requirement http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#8-grouped-bar-chart
score:-1
The best library I could found to have exactly this feature is Highcharts, this is my implementation:
and here http://jsfiddle.net/fieldsure/Lr5sjh5x/2/ you can find out how to implement it.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column",
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Grouped Categories with 2 Series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
},
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Daily Tickets',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Secondary yAxis
title: {
text: 'Invoices',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}]
,
series: [{
name: 'Daily',
type: 'column',
yAxis: 1,
data: [4, 14, 18, 5, 6, 5, 14, 15, 18],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Invoices',
type: 'column',
data: [4, 17, 18, 8, 9, 5, 13, 15, 18],
tooltip: {
valueSuffix: ' °C'
}
}],
xAxis: {
categories: [{
name: "1/1/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}, {
name: "1/2/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}, {
name: "1/3/2014",
categories: ["Vendor 1", "Vendor 2", "Vendor 3"]
}]
}
});
});
body {
padding: 0px !important;
margin: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container" class="chart-container"></div>
But the problem is the library is not free for commercial purposes, and this is the Chartjs implementation, in my case it is look like this:
const data ={"labels":[{"label":"Exams","children":["Wellness Examination"]},{"label":"Surgery","children":["Neuter Surgery"]},{"label":"Vaccines","children":["Bordetella"]},{"label":"Dentistry","children":["Dental Cleaning"]},{"label":"Diagnostics","children":["Other","Pre-Anesthetic","Adult Diagnostics","Pre-Anesthetic Diagnostics","Heartworm & Tick Borne Disease Test"]},{"label":"Treatments/Other","children":["Other","Microchip"]}],"datasets":[{"label":"Consumed","backgroundColor":"red","tree":[{"value":0,"children":["0"]},{"value":0,"children":["0"]},{"value":1,"children":["1"]},{"value":0,"children":["0"]},{"value":15,"children":["0","1","3","11","0"]},{"value":15,"children":["2","13"]}]},{"label":"Purchased","backgroundColor":"blue","tree":[{"value":28,"children":["28"]},{"value":1,"children":["1"]},{"value":24,"children":["24"]},{"value":10,"children":["10"]},{"value":103,"children":["2","16","34","49","2"]},{"value":165,"children":["75","90"]}]}]};
window.onload = () => {
const ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Hierarchical Bar Chart'
},
layout: {
padding: {
// add more space at the bottom for the hierarchy
bottom: 45
}
},
scales: {
xAxes: [{
type: 'hierarchical',
stacked: false,
// offset settings, for centering the categorical
//axis in the bar chart case
offset: true,
// grid line settings
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true
}
}]
}
}
});
};
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/chart.js/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/chartjs-scale-hierarchical"></script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
for each more column just add another dataset.
score:0
Hope this helps,
I did a bit of research and couldn't find methods to implement your solution in chartjs. Chartjs has grouped bar charts but not subgrouped bar charts like in your case.
Example: http://jsfiddle.net/harshakj89/ax3zxtzw/
Here are some alternatives,
D3js (https://d3js.org/) can be used to create sub grouped bar charts.Data can be loaded from csv or json. D3 is highly configurable, but you may have to put some effort than chartsjs.
https://plnkr.co/edit/qGZ1YuyFZnVtp04bqZki?p=preview
https://stackoverflow.com/questions/37690018/d3-nested-grouped-bar-chart
https://stackoverflow.com/questions/15764698/loading-d3-js-data-from-a-simple-json-string
ZingChart is a commercial tool and can be used to implement bar charts with sub groupes.
https://www.zingchart.com/docs/chart-types/bar-charts/
But I prefer D3 over this library. because D3 comes under BSD License.
score:1
you can provide value separately for different axis via datesets
and provide an object with different configuration option (borderColor, pointBackgroundColor, pointBorderColor)
etc, i hope It'll help.
here is the link for the with an update (fiddle you shared) Updated Fiddle
data: {
labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
datasets: [{
label: '# of Votes',
xAxisID:'xAxis1',
data: [12, 19, 3, 5, 2, 3]
},
// here i added another data sets for xAxisID 2 and it works just fine
{
label: '# of Potatoes',
xAxisID:'xAxis2',
data: [9, 17, 28, 26, 29, 9]
}]
}
I hope that solves your problem :)
Source: stackoverflow.com
Related Query
- Chartjs 2: Multi level/hierarchical category axis in chartjs
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to set ChartJS Y axis title?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- Chartjs change the specific label color in x axis in callback function
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Chartjs 2.7.3: Set Y data at the correct X position axis
- How do I fix over limit y axis value in ChartJS
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Changing the Y axis unit in Chartjs
- Chartjs real time graph x axis movement
- Chartjs x axis scaling
- Chartjs change horizontal axis value
- How to add ChartJS code in Html2Pdf to view image
- Chartjs: Custom text on y axis at certain level
- ChartJS - Customize Ticks/Labels on Y Axis
- chartjs time cartesian axis adapter and date library setup
- ChartJS multiple X axis and extra labels in y axis
- Chartjs - custom y axis range
- chartjs custom y axis values, different text for each one
- Specific grid line in X axis in ChartJs
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Using chartjs v2 to show categorical values on axis instead of numeric
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to draw multiple line on y axis for same x axis in chartjs v2?
More Query from same tag
- Create multiple pie chart simultaneously using chart.js
- How to style specific gridlines differently in chartJs?
- How to chart detected activities on the hour using Chart.js
- Combine Chart.js programmatic and legend based dataset toggling
- How to remove labels from ng2-chart(chart.js)
- Why is here a number?
- Chart.JS Starting at 00:00am and ending at 23:59pm
- How can I shade a portion of a ChartJS line grph=
- How to use excess vertical space in stacked bar chart?
- Two charts in a page not working, using Chart.js 3.1.1 cdn in Laravel 8.x framework
- Chartjs Barchart without borders
- Chart JS chart not rendering in ArcGIS popup when using navigation arrows
- Chart.JS - Polar area - Legend hover style and margin
- chartjs radar glowing edges effect
- How to slice list items in Django Template using javascript (or similar)
- React Chartjs 2 display axes above datasets backgroundColor
- Can not update bar chart values in Chart.js 2.0.0 alpha3
- How does one reproduce this plot in JavaScript?
- Same bar different color / One bar with many colors
- how to filter year from datefield in django
- Chartjs small offset on top
- How do I persist the gridlines for ticks that are not displayed? [Chart.js]
- Vue.js: How to retrieve data from API for vue chart.js
- Draw horizontal line on chart in chart.js on v2
- Chart.js only appears randomly, and disappears on page refresh
- Using zoom/pan with ChartJS
- How to add space to the bottom of the chart in chartjs [angular]
- displaying bar chart in laravel
- Chart.js - style legend: smaller circles
- Load data into chartjs using promises in vue.js