TheRealPapa TheRealPapa - 6 months ago 156
CSS Question

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

Answer

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