title: stackLabels configuration in Highcharts
body: <p>I am working with highcharts and having some problems with <code>stackLabels</code> configuration of highcharts. I was asked to display a bar chart with &quot;score/full score&quot; format, e.g. 6 out of 10 should be like</p>
  <p>⬛︎⬛︎⬛︎⬛︎⬛︎⬛︎⬜︎⬜︎⬜︎⬜︎ 6/10</p>
  <p>And I faked it with <a href="http://www.highcharts.com/demo/bar-stacked" rel="nofollow noreferrer">stacked bar</a> chart with 6 for the first part of the bar and 4 for the second part.</p>
  <p><strong>[Solved]</strong> However, I don't know how to display <code>6/10</code> in <code>stackLabels</code> (It seems that I can only use <code>{total}</code> in it, while I can use <code>{point.y}/{point.fullscore}</code> in <code>dataLabels</code>).</p>
  <p><strong>[Unsolved]</strong> And also, when I use the basic bar chart, <code>dataLabels</code> automatically adjust its position (In my case, <code>dataLabels</code> will show on the left of the right edge of the bar). However, <strong>how should I force the <code>stackLabels</code> to display?</strong></p>
  <p><a href="https://stackoverflow.com/a/21194146/4158282">This answer</a> points out that there is no enough space for <code>stackLabels</code> to display, and the solution is to make <code>max</code> 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.</p>
  <p><a href="https://i.stack.imgur.com/S51gj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S51gj.png" alt="enter image description here" /></a></p>
  <p>Any help will be appreciated! Thanks in advance!</p>