high-charts datalabel position needs to change when value is too small

问题:

Data labels (in this case cash) appear in the right place, just inside the bar on the right, most of the time. However if the value of the bar is low enough, it ends up overlapping with the axis label (as shown by the purple bar).

My first instinct was to set a max value and change the position of the data-label base on that. Something like, if value is less than $10 place the label outside just to the right of the bar. But there is a big problem with that approach. The size of the chart is variable and responsive, so that threshold needs to be variable.

Ideally the bar itself should be measured and compared with the width of the data label to determine position. Achieving that solution has me at a loss. I have had no luck in getting the phyiscal size of the bar out of high charts, or the datalabel for that matter.

Thanks in advance folks!

---

UPDATE for Jugal Thakkar's solution on an Android 2.1 device

回答1:

UPDATED AGAIN. Will work on all devices which Highcharts supporting.

---

I think that this solution will meet your needs.

回答2:

You can change X and Y position using attrin the High Charts.

By, Default data labels gets plotted outside the bar. So, I guess you should have set X and Y positions in the data Labels property.

You can do something like this

function(chartObj) {     $.each(chartObj.series[0].data, function(i, point) {         if(point.y <=10) {             point.dataLabel.attr({x:point.dataLabel.x+30});         }     });

Call this method once chart is loaded.

Here is the fiddle link for the reference.

回答3:

Can you try this,

var alignDataLabels = function() {     var chartObj = window.chart || this;     $.each(chartObj.series[0].data, function(i, point) {         var dataLabel = point.dataLabel;         // Get the current X         var x = dataLabel.translateX;         var y = dataLabel.translateY;         // If the goes on LHS of the axis         if (x < 0) {             // Set the label's X to 5 px more than the bar's height(length) in pixels             dataLabel.translate(point.barH + 5, y);         }     }); };

jsFiddle @ http://jsfiddle.net/jugal/TCjJy/

Screenshot on my android (Useragent: Android 4.1.1 AppleWebKit/534.30 (KHTML, like Gecko)

转载请标明出处:high-charts datalabel position needs to change when value is too small

文章来源: high-charts datalabel position needs to change when value is too small