Reputation: 2647
I am working with highcharts and having some problems with stackLabels
configuration of highcharts. I was asked to display a bar chart with "score/full score" format, e.g. 6 out of 10 should be like
⬛︎⬛︎⬛︎⬛︎⬛︎⬛︎⬜︎⬜︎⬜︎⬜︎ 6/10
And I faked it with stacked bar chart with 6 for the first part of the bar and 4 for the second part.
[Solved] However, I don't know how to display 6/10
in stackLabels
(It seems that I can only use {total}
in it, while I can use {point.y}/{point.fullscore}
in dataLabels
).
[Unsolved] And also, when I use the basic bar chart, dataLabels
automatically adjust its position (In my case, dataLabels
will show on the left of the right edge of the bar). However, how should I force the stackLabels
to display?
This answer points out that there is no enough space for stackLabels
to display, and the solution is to make max
value bigger and leave some space for it. However, the solution is not that elegant to me, and also since my bar chart is horizontal and the label should be long.
Any help will be appreciated! Thanks in advance!
Upvotes: 2
Views: 4374
Reputation: 45079
To answer second question:
You can set yAxis.stackLabels.crop
to false, so labels will be rendered always. Those labels won't show up inside the plotting area, but will be rendered somewhere outside. stackLabels
are not dataLabels
- dataLabels
have option justify
, which forces labels to be rendered inside the plotting area.
However, in Highcharts you can get access to those labels, and move them (that's why crop
needs to be set to false
- to render labels anyway), here is simple POC:
function updateStacks() {
var chart = this,
H = Highcharts,
padding = 15,
item,
bbox;
for (var stackName in chart.yAxis[0].stacks) {
for (var itemName in chart.yAxis[0].stacks[stackName]) {
item = chart.yAxis[0].stacks[stackName][itemName]; // get stack item
bbox = item.label.getBBox(true); // get label's bounding box
// if label is outside, translate it:
if (bbox.width + bbox.x > chart.plotWidth) {
// add some poding, for a better look&feel:
item.label.translate(-bbox.width - padding);
}
}
}
}
Now simply use that method in load
and redraw
events, here you are:
chart: {
type: 'bar',
events: {
redraw: updateStacks,
load: updateStacks
}
},
And live demo: http://jsfiddle.net/awe4abwk/ - let me know if something is not clear.
PS: Your answer with formatter
for stackLabels
is good!
Upvotes: 2
Reputation: 2647
Okay, I've found the solution for the first question: How to show the specific series values in stackLabels
? from this answer.
In my case, the code should be:
yAxis: {
stackLabels: {
formatter: function() {
return [this.axis.series[1].yData[this.x], '/', this.total].join('');
},
enabled: true,
}
}
If you have better solution, post it! And I still have no idea about how to find it in the docs, maybe I should dig more...
Upvotes: 1
Reputation: 1575
Use formatter to change default stack label. You can access axis label with this.axis.
stackLabels: {
enabled: true,
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
//Make your changes here to reflect your output. This is just a sample code
}
}
Now to always show stack labels you have two options which are described here.
Upvotes: 1