i want to represent two categories of data in stacked column chart. Though i am able to get one column with stacks showing its sub category data.Below is the code i am trying
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
I want a chart which can full fill below mentioned requirement. I want to show month wise purchase of 4-wheeler(cars) and 2-wheeler(bikes and scooter) sale monthwise for example for month of october if we have data for cars as ford=25,Maruti=30,Honda=20,BMW=15 and for 2-wheeler Bajaj=70,Yamaha=60,Honda=40,Suzuki=10. Now i want my chart to show each 4-wheeler as one stacked column showing all its data(Ford,Maruti,Honda,BMW) as its stacks and same for 2-wheeler . Any help will be appreciated.
I advice to familiar with grouped plugin, https://github.com/blacklabel/grouped_categories/ which seems to be solution of your problem. Let us know if it correct.
Related
I have a problem in displaying stack label value (histogram chart) , in fact Stacked column label doesn't not displaying, when columns sum had close values on yAxis, i uploaded the (screen shot and code):
Thank you for help
screenshot histogram
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: 'John',
data: [54701, 56762, 42544, 94446, 20473],
stack: 'x'
}, {
name: 'Jane',
data: [54701, 52762, 36879, 68872, 82761],
stack: 'y'
}]
});
It's because by default stackLabels.allowOverlap = false. Set this property to true and you will see all labels:
stackLabels: {
enabled: true,
allowOverlap: true,
rotation: 0,
style: {
fontWeight: 'bold',
fontSize: '9px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
Demo:
https://jsfiddle.net/BlackLabel/xbp5c61s/
API reference:
https://api.highcharts.com/highcharts/yAxis.stackLabels.allowOverlap
Can anyone help me with highcharts stacked column my problem is that i have big difference with data and the graph show me only the big data.
i try minPointLength but don't help in my case. please check here the example: http://jsfiddle.net/17jd6frn/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [2000, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [7000, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
One option is to use a logarithmic scale (http://api.highcharts.com/highcharts/yAxis.type). It will show your small numbers and your large numbers. Note, that you can't show 0 or negative numbers on a log scale.
yAxis: [{
type: "logarithmic",
min: 1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}],
http://jsfiddle.net/17jd6frn/1/
You have two options with you.
1.) Either use "minPointLength". This is the minimum value for for the y-axis plotting.You can use this setting and set this to a value which will always be shown in case the value gets too small for plotting. You can use this setting like
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
},
minPointLength: 5
}
},
series: [{
name: 'John',
data: [7000, 5, 1, 1, 2]
}, {
name: 'Jane',
data: [2000, 10, 1, 1, 2]
}, {
name: 'Joe',
data: [5, 1, 1, 1, 2]
}]
});
});
2.) You can change the "stacking" option to 'percent' and remove the 'minPointLength' . This will cause the stacked columns to appear w.r.t to their value percentages.
Please play with the above two options and see if it works for you !!!
I would like to add points to my highcharts without expecting to fulfill all the categories.
is it possible? any work around?
I've done the same when X data is based on time, but could it be done with other kind of data?
For example one serie could be just Apples and Oranges, but not the other categories. See code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [[Apples,5], [Oranges, 6]]
}, {
name: 'Jane',
data: [[Grapes,2]]
}, {
name: 'Joe',
data: [[Grapes,2], [Bananas, 4]]
}]
});
});
You can use the indexes into your categories: http://jsfiddle.net/BwyAj/
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
...
series: [{
name: 'John',
data: [[categories.indexOf('Apples'),5], [categories.indexOf('Oranges'), 6]]
}, {
name: 'Jane',
data: [[categories.indexOf('Grapes'),2]]
}, {
name: 'Joe',
data: [[categories.indexOf('Grapes'),2], [categories.indexOf('Bananas'), 4]]
}]
Whats the reason for the following chart don't render dates on the xAxis:
http://jsfiddle.net/NwkAr/
This are the settings:
{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [10000, 20000, 30000, 40000],
type: 'datetime'
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
}
Remove categories, you can't use categories and datetime axis in the same time.
I"m working on a highchart similar to the following http://jsfiddle.net/7FdQR/1/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [null, 3, 7, 2, null]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
If you look at the data for John you'll see some null values for apples and bananas.
If we disable Jane and Joe series and leave only John's info we will still see all the fruit categories on the x-axis even though there are null values in John's dataset and ignoreHiddenSeries is set to true. What I want to achieve here is for the x-axis to be redrawn to only display Oranges, Pears and Grapes labels instead (no Apples and Banana labels on x-axis). Is there a way to do that in highcharts?
Thanks!
Found a solution. It might not be the best one but it works http://jsfiddle.net/Hm8T9/
I created a small script and used setExtremes() function to manually set mins and maxs for xAxis.
Also if you ever deal with < 5 categories and do not want to show all of them (like in my example), set minRange for xAxis to 1 or whatever number you need.
xAxis:
{
minRange: 1
}