Add custom buttons in Angular Highcharts Line Chart

Question

I'm trying to add 2 custom buttons in Angular Highcharts Line chart in the exporting property

exporting: {
    enabled: true,
    buttons: {
        customButton: {
            text: 'Custom Button',
            click: () => {
                alert('You pressed the button!');
            },
        },
        anotherButton: {
            text: 'Another Button',
            click: () => {
                alert('You pressed another button!');
            },
        },
    },
}

But these 2 buttons not displaying. What could be the missing logic here? Stackblitz

Answer 1

The exporting.buttons is an option to edit the buttons in the exporting menu only: https://api.highcharts.com/highcharts/exporting.buttons

To render the custom buttons use the SVGRenderer feature: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

You can add those buttons in the render callback - calls after initial load and after each redraw: https://api.highcharts.com/highcharts/chart.events.render