HighCharts Place label on a bar

Given the image below - I would like to take a label from the legend for each column and print it on the column itself. I could not find anything in the HighCharts API that would allow me to do this. Does anyone have any ideas or examples of what I can see?

Thanks!

Highchart exampl

EDIT

There is a better example of what I want to accomplish

I think this is easily distinguishable. Use Case: These statistics are displayed on large monitors around the call center. A legend is usually too small to read from any distance.

+4
source share
2 answers

Just try formatting the data label on the column chart, here is an example to get you started.

$(function () { $('#container').highcharts({ chart: { type: 'column' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, plotOptions: { series: { dataLabels: { enabled: true, color: '#000', style: {fontWeight: 'bolder'}, formatter: function() {return this.x + ': ' + this.y}, inside: true, rotation: 270 }, pointPadding: 0.1, groupPadding: 0 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); }); 
+13
source

In fact, what this case requires for this is to use a column instead of a column and category labels that are not rotated and are readable.

 Example: 

http://jsfiddle.net/jlbriggs/yPLVP/23/

You can also offset axis labels to place the category name on the panel, but in reality it is not as good as shown above:

http://jsfiddle.net/jlbriggs/yPLVP/24/

They could be like a column, not a bar, but of course, but the rotation of the labels is always bad if it can be avoided.

These methods also allow you to use a data label, which will continue to be used as a data label, if necessary.

+4
source

Source: https://habr.com/ru/post/1491861/


All Articles