score:1

Accepted answer

I can suggest two options for this case:

  1. Use the events.render callback, destroy and render a new label after each redraw:

Demo: https://jsfiddle.net/BlackLabel/ps97bxkg/

  1. Use the events.render callback to trasnlate those labels after each redraw:

Demo: https://jsfiddle.net/BlackLabel/6kwag80z/

Render callback triggers after each chart redraw, so it is fully useful in this case - more information API: https://api.highcharts.com/highcharts/chart.events.render

score:0

I'm not sure if this helps, but I placed items inside of highcharts using their svgrenderer functionality (labels, in particular, but you can also use the text version of svgrenderer), and was able to make them responsive

I was able to do something by manually changing the x value of my svgRenderer label.

I'm in angular and have a listener for screen resizing:

Also Note that you can change the entire SVGRenderer label with the attr.text property.

this.chart = Highcharts.chart(.....);
// I used a helper method to create the label
this.chart.myLabel = this.labelCreationHelperMethod(this.chart, data);

this.windowEventService.resize$.subscribe(dimensions => {
  if(dimensions.x < 500) { //this would be your charts resize breakpoint
  // here I was using a specific chart series property to tell where to put my x coordinate,
  // you can traverse through the chart object to find a similar number, 
  // or just use a hardcoded number
   this.chart.myLabel.attr({ y: 15, x: this.chart.series[0].points[0].plotX + 20 }); 
  } else {
   this.chart.myLabel.attr({ y: 100, x: this.chart.series[0].points[0].plotX + 50 });
  }
}

//Returns the label object that we keep a reference to in the chart object.
labelCreationHelperMethod() {
     const y = screen.width > 500 ? 100 : 15; 
     const x = screen.width > 500 ? this.chart.series[0].points[0].plotX + 50 : 
        this.chart.series[0].points[0].plotX + 20


      // your label
      const label = `<div style="color: blue"...> My Label Stuff</div>`
      return chart.renderer.label(label, x, y, 'callout', offset + chart.plotLeft, chart.plotTop + 80, true)
  .attr({
    fill: '#e8e8e8',
    padding: 15,
    r: 5,
    zIndex: 6
  })
  .add();
 }

Related Query

More Query from same tag