Reputation: 3170
Highchart, bar chart with multiple series
How can I display a bar chart with multiple series:
http://jsfiddle.net/qyd6w5tx/1/
$(function () {
$('#container').highcharts(
{
"chart": {
"style": {
"fontFamily": "Arial, sans-serif"
},
"alignTicks": false,
"marginRight": 20,
"height": 334
},
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">●</span> <span style=\"{series.options.style.pct}\">({point.percentage:,.2f}%)</span> <b style=\"{series.options.style.abs}\">{point.value:,.2f}</b><br/>"
},
"xAxis": {
"type": "category",
"reversed": false,
"labels": {}
},
"yAxis": [{
"title": {
"text": null
},
"index": 0
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"index": 1,
"min": -0.39,
"max": 9.99
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"opposite": true,
"index": 2
}],
"legend": {
"borderWidth": 0,
"enabled": false
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
"style": {
"textShadow": "none"
},
"allowOverlap": true
},
"minPointLength": 2
},
},
"credits": {
"enabled": false
},
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}],
"title": {
"text": "Test"
}
}
);
});
In this example I would like to display one after the other:
- Test 01
- Test 02
- Test 03
- Test 04
- Test 05
- Test 06
- Test 07
And then have the Group A in blue and the Group B in red, and display a legend under the chart with: - Group A (in blue) - Group B (in red)
I am bit confused with how to make this with highchart...
Edit:
Thanks to Rotan075 to understand my problem and to find a solution. http://jsfiddle.net/hw5s4ahm/
Actually I didn't specify that need to keep the same data structure for the series:
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}]
The rest can change, but this data is generated by a third part level and has to stay generic. I thought it would be just a question of settings but it seem to be much more complicated.
Upvotes: 0
Views: 9037
Answers (2)
Reputation: 17800
Most of what you are asking for should be handled by the default behavior of highcharts.
-You can specify the color for each series within the series options:
series: [{
name: 'Group A',
color: 'rgba(0,156,255,0.9)',
data: [...]
},{
name: 'Group B',
color: 'rgba(204,0,0,0.9)',
data: randomData(7)
}]
-You can set your x axis labels via the categories option:
xAxis: {
categories: ['Test 01','Test 02','Test 03','Test 04','Test 05','Test 06','Test 07']
}
-The chart will group them by default
-The legend will be aligned below the chart by default (no hacks required)
Example in action:
Updated example using your data:
Adds a min and max value to the x axis to always show each category
Upvotes: 0
Reputation: 2615
For what I understood out of your code is that you have data for Group A and group B right? What you have to do is make two data list with each of the same length. If there is no data for the specific group you have to add a null value to it. Otherwise Highcharts combines the group A and group B for every Test x.
What you need is this code (live on JSFiddle):
$(function () {
$('#container').highcharts(
{
chart: {
type: 'column',
inverted: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter:function() {
if(this.y > 0){
return this.y;
return this.point.y;
}
}
}
}
},
yAxis: {
allowDecimals: false,
min: -1,
labels: {
formatter: function () {
return this.value + '%';
}
},
title: {
text: ' ',
margin:40
}
},
xAxis: {
categories: ['Test1', 'Test2', 'Test3', 'Test4', 'Test5','Test6','Test7']
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'middle',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1,
y:10,
x:350
},
series: [{
name: 'GroupA',
color: 'rgba(223, 83, 83, .5)',
data: [{y:null},{y:null}, {y:null}, {y:null}, {y:2.9}, {y:0.5}, {y:1.5}]
},{
name: 'GroupB',
color: 'rgba(119, 152, 191, .5)',
data: [{y:6.5}, {y:3.9}, {y:8.5}, {y:6.6},{y:null},{y:null},{y:null}]
}],
title: {
text: "Test"
}
}
);
});
P.S. For aligning the Legend on the bottom of your graph I did that in a quite hackish way. I use as title text just blank space and place the legend above it. You can modify it in whatever you want.
Upvotes: 1
Related Questions
- Highcharts 2 groups of series
- How to create a single series bar graph with Highcharts
- Highchart multiple column range in same series on bar chart
- Multiple categories and series in Highcharts
- Creating A MultiSeries Bar Chart With Different Number of Series For Each Item
- Highcharts - Stack a full serie (Bar chart)
- How to add another series into my highchart
- Highcharts multiple data series
- Series Data in HighChart
- Highcharts with multiple series from JSON