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
- How to scale label size radar chart chart.js
- Displaying dataset labels in Chart.js line graph
- How do I invert an y-axis using chart.js (v2.0-dev)
- Laravel 5.1 format date array for chart.js data
- chart js - Apply different color for each x-axes label
- Rotate chart "pie" to need value or angle
- Image pointStyle doesn't load on initial chart render?
- Chartjs unselected lines on render
- How to position yAxes labels in chartJS
- ChartJS set default options only to specific Canvas, not globally
- How to add padding to the vertical scale (X-axis) in Chart.js?
- How can I force the ".0" portion of a value to explicitly display (Chart.JS)?
- Chart JS - Grid colors and gradient fill not showing
- Chartjs not reading data from vuex mapped state
- ChartJS tooltip position / placement
- chart.js line chart and "correct" spacing between points? (i.e. horizontal position based on percent of width, not fixed)
- show label in tooltip but not in x axis for chartjs line chart
- How to Convert an Array of Objects into an Object of Associative Arrays in Javascript
- How to set the number of of rows in a line chart in chart.js?
- Chartjs scaleLabel position
- django + chart.js: page language switch button mess up the charts. What?
- Chart.js not working on Angular 1.5?
- chartjs Line chart Javascript
- Change color of Polar Area datasets in Angular
- chart.js: set specific numbers in y-axis
- ChartJS multiple tooltip callbacks not working
- Chart.js - Draw bar chart with multiple labels
- How i can insert string data to diagrams in chart.js
- Replace chartjs data
- Chart.js not rendering chart with data from mySQL database