Ad

Realign Labels Only To Single Chart Or Type Chart On Highcharts

I followed this tutorial: http://jsfiddle.net/Yrygy/270/ and is worked fine. But, i have another chart in same view. A line chart.

This second chart assume realign labels too. How can use the function for a single chart container Id, or with its type of chart, like:

var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },

The function im using:

  function realignLabels(serie) {

            $.each(serie.points, function (j, point) {
                if (!point.dataLabel) return true;

                var max = serie.yAxis.max,
                    labely = point.dataLabel.attr('y')

                if (point.y / max < 0.35) {
                    point.dataLabel.attr({
                        y: labely - 100,
                    });
                }
            });
        };

        Highcharts.Series.prototype.drawDataLabels = (function (func) {
            return function () {
                func.apply(this, arguments);

                if (this.options.dataLabels.enabled || this._hasPointLabels)
                {
                    realignLabels(this);
                }
            };
        }(Highcharts.Series.prototype.drawDataLabels));

Line chart affected: http://prntscr.com/9srmpv

Ad

Answer

You can modify your wrapper:

 Highcharts.Series.prototype.drawDataLabels = (function(func) {
    return function() {
      func.apply(this, arguments);
      if ((this.options.dataLabels.enabled || this._hasPointLabels) && this.chart.options.chart.realignLabels) {
        realignLabels(this);
      }
    };
  }(Highcharts.Series.prototype.drawDataLabels));

As you can see I have added new option to your if statement. Now if you want to realign your labels you just have to write:

chart: {
  type: 'column',
  realignLabels: true,
  animation: false
},

I have added animation parameter. Without this parameter realign labels will not work when you hide and show your series.

example: http://jsfiddle.net/Yrygy/497/

Ad
source: stackoverflow.com
Ad