CODEWITHSUNDEEP
javascriptjquerycsshighcharts
TheRealPapa
TheRealPapa

Reputation: 4539

Highcharts Label redraw

I am working off this JSFIDDLE which shows how to add a label to a point in a chart. This works fine for fixing a position for the label in the case of the chart not being responsive. Change the width of the fiddle and the label sits in the original position. I want the label to stay on top of the last column.

I have tried using load and redraw events and I am close, but I need to destroy the label before creating a new one. 

events: {
    load: function () {
        var point = this.series[0].points[2];
        this.renderer.label(
                '<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
        )
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        })
        .add();
    },
    redraw: function() {
        var point = this.series[0].points[2];
        this.renderer.label(
                '<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
        )
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        })
        .add();
    }
 }

I want the label to follow the point when the chart's width is changed.

I tried using a tooltip, but has problems disabling it from the first two columns. I can redraw the tooltip ok, but could not disable it from all other columns

Upvotes: 1

Views: 964

Answers (1)

nagyben
nagyben

Reputation: 938

Check out this updated JSFiddle

I added a variable to the global scope var theLabel;

Then on chart initial draw, set theLabel = chart.renderer.label(...)

Then

redraw: function() {
    theLabel.destroy();
        point = this.series[0].points[2];
        theLabel = this.renderer.label('<div class="text-center">Reach 10 active subscriptions<br/>and enjoy a one year FREE membership!</div>', this.plotWidth - 200, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop)
    .css({
      color: '#FFFFFF'
    })
    .attr({fill: 'rgba(0, 0, 0, 0.75)',
      padding: 8,
      r: 5,
      zIndex: 6
    })
    .add();
}

Note that in redraw::

  1. I call theLabel.destroy() to remove the original label
  2. I changed chart to this
  3. Instead of plotting it at x = 270 I plot it at this.plotWidth - 200 to get it more-or-less on the right hand side of the plot with the chevron always pointing to the red bar.

Hope this works for you

Upvotes: 3

Related Questions