CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Disera
Disera

Reputation: 208

Highcharts - CUSTOM DATA LABELS in line series, are disappearing on window resize

I have a line series, on which i display custom data labels for only particular value in the series. On Window resize, the data labels are disappearing from the chart. Is there any solution for this issue. Thanks in Advance.

My code:

var options = {
            chart : {
                renderTo : 'container',
                type : 'line',
            },

        xAxis : {
            spacingTop: 50,
            spacingBottom: 25,
            categories : []
        },

        yAxis : [ {
            min: 0,
            minRange: 0.1
        } ],
        plotOptions: {
            line:{
                dataLabels: {
                    enabled:true,
                    defer:false,
                    formatter: function() {
                        count++;
                        if(this.y)
                            if(batch_info[count]!=0)
                                return batch_info[count];
                    }
                }
            }
        },
        series : []
    };

`

Before window Resize:

enter image description here

After Maximizing Window:

enter image description here

Upvotes: 3

Views: 1148

Answers (2)

morganfree
morganfree

Reputation: 12472

A formatter callback is invoked on every redrawing/resizing, so the most likely scenario is that you do not reset count variable and as the result it accesses the non-existing value, e.g. batch_info[101] when the batch_info.length === 100.

You can use the modulo operator to avoid it:

formatter: function () {
                    count++;
                  return batch_info[count % batch_info.length];
                }

example: http://jsfiddle.net/ck8zhLmj/1/

but I suggest refactoring the code and dropping the usage of count variable. Instead you can include the information about data label in the series' data or point object.

Upvotes: 4

Paul
Paul

Reputation: 1

A solution could be to just reload the highcharts function after a resize.

 $(window).resize(function(){
     drawVisualization();
 });

Upvotes: 0

Related Questions