Grouped clustered chart - Fruits eg
by amrutaJgtp
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y;
}
},
plotOptions: {
series: {
pointPadding:0,
groupPadding:0.3
}
},
series: [{
name: 'John',
//data: [5, 3, 4, 7, 2],
data:[{
"eQCategoryValue":"Apples",
"y":5
},
{
"eQCategoryValue":"Oranges",
"y":3
},
{
"eQCategoryValue":"Pears",
"y":4
},
{
"eQCategoryValue":"Grapes",
"y":7
},
{
"eQCategoryValue":"Bananas",
"y":2
}],
pointPlacement: -0.1
}, {
name: 'Joe',
//data: [3, 4, 4, 2, 5],
data:[{
"eQCategoryValue":"Apples",
"y":3
},
{
"eQCategoryValue":"Oranges",
"y":4
},
{
"eQCategoryValue":"Pears",
"y":4
},
{
"eQCategoryValue":"Grapes",
"y":2
},
{
"eQCategoryValue":"Bananas",
"y":5
}],
pointPlacement: -0.1
}, {
name: 'Jane',
//data: [2, 5, 6, 2, 1],
data:[{
"eQCategoryValue":"Apples",
"y":2
}
,{
"eQCategoryValue":"Oranges",
"y":0
},
{
"eQCategoryValue":"Pears",
"y":6
},
{
"eQCategoryValue":"Grapes",
"y":2
},
{
...