Highcharts add button fix chart

发布于 2020-04-10 16:12:08

Good day! How do I add a button to link it to a graph? I mean, when I add a button. When I stretch the graph, the button remains at its same coordinates when it should have moved as well.

I add it like this:

chart.renderer.button('Reset', 500, 200, function() {
  console.log(chart);
}, null, null, null).attr({
      zIndex: 4
    }).add();

Sebastian Wędzel 2020-02-04 00:01

Below is a guideline of how to creates responsive buttons using the render feature.

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

  chart: {
    events: {
      render() {
        let chart = this,
          x = chart.plotWidth / 2 + chart.plotLeft,
          y = chart.plotHeight;

        if (chart.customBtn) {
          chart.customBtn.destroy();
        }

        chart.customBtn = chart.renderer.button('Reset', x, y, function() {}, null, null, null).attr({
          zIndex: 4,
        }).add();

        //center button after render with width value
        chart.customBtn.translate(chart.customBtn.x - chart.customBtn.width /2, chart.customBtn.y)
      }
    }
  },

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

API: https://api.highcharts.com/highcharts/chart.events.render

Highcharts add button fix chart

Related issues