Search code examples
javascriptangularhighchartscustomization

Highcharts custom button styling off on full screen

I am using highcharts in my angular application. Inside the chart, I've placed custom button to take the user to a new page.

The problem is, when I fullscreen the chart, using the export menu, the custom button placement is at the original placement only. It does not change its position with the chart dimensions i.e if the chart dimensions increase from 500x500 to 1280x1000 then the button does not move accordingly

before full screen

before entering full screen

enter image description here

during full screen

I place the button on the chart using event.render. Do I need to:

  1. render the buttons again on full screen event and exit full screen event.
  2. change the alignment of the buttons to always be top right aligned (adding margin to not overlap with the export button).
  3. anything completely different, like give up coding

Code to add button to the chart:

 public static donutChartOptions: Options{
     chart: {
          type: 'donut',
          events: {
              render(events) {
                   let chartVal = this;
                   chartVal.renderer
                   .button('View Full Report', 460, 8, (e) => {})
                   .attr({
                       zIndex: 3,
                   })
                   .on('click', function () {
                        window.location.href = '#/home/viewDistribution';
                   })
                  .add();
               }
             },
           }
         }
Solution

  • You can use dynamic values stored in a chart to create the button in the proper position. For example:

      chart: {
    ...,
    events: {
      render(events) {
        const chart = this;
        const exportingBBox = chart.exportingGroup.getBBox();
        const x = exportingBBox.x - 10;
        const y = 6;

        if (!chart.customButton) {
          chart.customButton = chart.renderer
            .button('View Full Report')
            .attr({
              zIndex: 3,
              align: 'right'
            })
            .on('click', function() {
              window.location.href = '#/home/viewDistribution';
            })
            .add();
        }

        chart.customButton.attr({
          x,
          y
        });
      }
    }
  }

    Live demo: http://jsfiddle.net/BlackLabel/2hoznsab/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr