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
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
Here is my code:
window.revenueIncomeChart = new Highcharts.Chart('revenueIncomeChartBox', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: chartData.categories,
title: {
text: null
},
labels: {
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
yAxis: {
title: {
text: null
},
className: 'axis-class',
labels: {
formatter: function() {
return '$ ' + this.value + $.trim(chartData.tooltipSuffix);
},
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
tooltip: {
valueSuffix: chartData.tooltipSuffix,
valueDecimals: 2,
shared: true,
split: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
borderColor: '#f2f2f2',
backgroundColor: '#FFFFFF',
shadow: false,
itemStyle: {
fontSize: '16px',
color: '#797979',
fontWeight: 'normal'
}
},
credits: {
enabled: false
},
series: chartData.series
});
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
I have this code that hides the number inside the label if the value is zero. My problem is that i also want to hide the sum number that is displayed over the column.
Here is an example, the last label.
http://jsfiddle.net/4NxYh/72/
plotOptions: {
line: {dataLabels: {enabled: true, style: {fontSize: '8px'}, style: {textShadow: false}, allowDecimals: true, formatter: function() {return this.y + 'e'}}},
column: {stacking: 'normal', shadow: false, dataLabels: {
formatter:function() {
if(this.y != 0) {
return this.y;
}
},
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '8px'
}
}},
series: {minPointLength: 0}
},
In order to hide the stack totals when the total number is zero, you can apply a similar variant of your dataLabels formatter to the stackLabels attribute (see also this Stack Overflow question that talks about formatting stackLabels).
stackLabels: {
enabled: true,
formatter: function(){
var val = this.total;
if (val > 0) {
return val;
}
return '';
},
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
In this instance, if your total is greater than zero, show the stack label. If not, show nothing.
Here is an updated version of your fiddle with this change: http://jsfiddle.net/brightmatrix/4NxYh/76/
I hope this is helpful for you!
For the past two days I've been trying real hard to figure out a way on how to provide a custom stack label instead of using the this.stackTotal option.
My Scenario is, the label for each stack is not basically dependent on each series but rather a multitude of factors. Therefore the client wants to set an arbitrary value to the end of each stacked bar. What I have so far is this (http://jsfiddle.net/yybLxgkd/) but have been unsuccessful so far in trying to display a custom label at the end of each stacked bar.
I tried to pass-in the value that I needed to be displayed at the end of each stack from within the series by providing a series option called QTotal, but later I realized that the stackLabel does not support (this.point.series). So I tried to play around and get atleast the category name displayed at the end of each bar but this too has been in complete vain.
I would really appreciate any help I can get in trying to resolve this issue.
Once again, what I what I would like to accomplish is display a custom label for each stack rather than (this.stackTotal) option.
My logic was perhaps I could initiate a loop for all the categories, from the stackLabel formatter, that are present and depending on the category - display the arbitrary value that is needed.
Many Thanks,
Jerry
My code is below:
$(function () {
var categoriesVal = {
'Term 1':'Term 1',
'Term 2':'Term 2',
'Term 3':'Term 3',
'Term 4':'Term 4',
'Term 5':'Term 5'
};
$('#container').highcharts({
chart: {
defaultSeriesType: 'bar',
style: {
fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
}
},
title: {
text: 'Serious AEs',
style: {
fontSize:'1.2em',
fontWeight:'bold'
}
},
xAxis: {
categories: ['Term 1','Term 2','Term 3','Term 4','Term 5'],
// lineColor:'#000',
lineWidth:.5,
tickWidth:.5,
tickLength:3,
tickColor:'#000',
title: {
text: '',
style: {
color:'#000',
fontSize:'.8em'
}
},
labels: {
style: {
fontWeight:'bold'
}
}
},
yAxis: {
min: 0,
//lineColor:'#000',
lineWidth:.5,
tickWidth:.5,
tickLength:3,
tickColor:'#000',
//gridLineWidth:0,
//gridLineColor:'#eee',
title: {
text: 'Total',
rotation:0,
style: {
color:'#000',
fontSize:'.8em'
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
// color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
// var s = this.series.options.QTotal;
// return Highcharts.numberFormat(Math.round(s*100)/100,2)+'%';
return categoriesVal[this.value]+' Test';
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
//shared: true,
crossHairs: true,
//useHTML: true,
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y + this.point.dtLabel; /*+'<br/>'+
'Total: '+ this.point.stackTotal*/;
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
/*formatter:function(){
return this.point.dtLabel;
},*/
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [
{
name: 'Not Serious',
data: [{y:2,dtLabel:'<br />Subject(s):0012001,006007'},6, 3, 3, {y:4,dtLabel:'<br />Subject(s):0012001,006007'}],
color: '#000000',
QTotal:0.79
},
{
name: 'Serious Severe',
data: [0,0,0,2, 5],
color: '#FF0000',
QTotal:0.79
},
{
name: 'Serious Moderate',
data: [2, 2, 3, 2, 1],
color: '#00FF00',
QTotal:0.79
},
{
name: 'Serious Mild',
data: [5, 3, 4, 7, 2],
color: '#0000FF',
QTotal:0.79
}
]
});
});
The stack label this doesn't contain a reference back to its series because it's a combination of all the series; so I'm not sure how you'd map a series QTotal to each stack.
The easiest way to do this would be to place your custom property directly into the stackLabel options:
stackLabels: {
qTotals: ['This','is','a','qTotal','!'],
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.options.qTotals[this.x];
}
}
Updated fiddle.
I am trying to generate combination chart with stacked column and spline.Example of categories that I have are :
'Q4 12', 'Q3 12', 'Q2 12', 'Q1 12', 'Q4 11','Forecast'
So it will have 6 bars, but I want 'Q4 11' and 'Forecast' 'touching',I mean close to each other.This is because 'Forecast' is related to 'Q4 11' category.I already read demo on Stacked and Group column but still don't have idea to make only certain bar close to each other.
Here is my code, you also can view it in JSFiddle also.Thanks for reading this.
$(function () {
$('#container').highcharts({
tooltip: { enabled: false },
chart: {
},
title: {
text: 'Desktop'
},
xAxis: {
categories: ['Q4 12', 'Q3 12', 'Q2 12', 'Q1 12', 'Q4 11','Forecast']
},
yAxis:[ {
min: 0,
title: {
text: 'TAM'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
{ // Secondary yAxis
title: {
text: 'Share',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
min:0,max:100
}
],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'HDD',
type:'column',
data: [0, 30, 40, 70, 20,30],
stack:'old'
},
{
name: 'SSHD',
type:'column',
data: [20, 20, 30, 20, 10,0],
stack:'old'
},
{
name: 'SSD',
type:'column',
data: [30, 40, 40, 20, 50,10],
stack:'old'
},
{
name: 'Share',
type: 'spline',
data: [10, 20, 40, 90,70],
}
]
});
});
You can use different series, linked to the main one. In that case you will be able to set different options for that one specific bar, see: http://jsfiddle.net/tQeF7/28/
Now you can play around with pointPadding and groupPadding like in aboce example. Or you can use pointPlacement, like this: http://jsfiddle.net/tQeF7/29/
Note, with the second solution, it moves only point, not the full category. In Highcharts terms categories always are taking full space and divide in evenly between each.