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

admin管理员组

文章数量:1309930

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 pared 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

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 pared 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

• javascript
• android
• canvas
• highcharts
• responsive-design

Share Improve this question Follow edited Sep 26, 2012 at 17:59 Jugal Thakkar 13.5k44 gold badges6363 silver badges8181 bronze badges asked Sep 19, 2012 at 0:41 FresheyeballFresheyeball 30k2121 gold badges105105 silver badges167167 bronze badges 2

• Instead of using the bar size, why not work with the div container for the highchart svg? That will give you a width of your chart canvas to work from, which would also work if the browser is resized. – Mark Commented Sep 19, 2012 at 1:16
• because the condition is dependent on the size of the bar – Fresheyeball Commented Sep 19, 2012 at 2:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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

---

I think that this solution will meet your needs.

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/jugal/TCjJy/

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

本文标签： javascripthighcharts datalabel position needs to change when value is too smallStack Overflow