custom export button

[anbu369]

Hi, How do I add a button to export the chart as png?

import {Chart} from 'highcharts-vue';
    import exporting from 'highcharts/modules/exporting';
    import HighCharts from 'highcharts';

    exporting(HighCharts);

    HighCharts.setOptions({
        exporting: {
            filename: 'test',
            enabled: false,
        }
    });
export default {
        data() {
            return {
                loading: true,
                topicChartRawData,
                regionChartRawData,
                numOfHighestResults: 3,
                numOfLowestResults: 3,
                periodDuration: 12,
                periodUnit: 'Month',
                chartOptions: {
                    chart: {
                        type: 'bar'
                    },
                    legend: {
                        enabled: false
                    },
                    xAxis: {
                        ...
                    },
                    yAxis: {
                        ...
                    },

                    plotOptions: {
                        ...
                    },

                    tooltip: {
                        ...
                    },

                    series: [
                        ...
                    ],
                    colors: ['#dddddd', '#cccccc']
                }
            }
        },}

Exporting the chart from context menu exports the chart with the filename I specified. But I have an export button and I would like to export the chart as png on clicking this button. thanks!

[Denyllon]

Hi @anbu369 ,

Thank you for asking question. The Issues section in this repository is our bug tracker. In order to get some support, please ask your questions using one of our support channels (forum, StackOverflow, or sending an email to support@highcharts.com).

P.S You just need to call chart.exportChart('image/png') on button click event. Please take a look on the following example: https://codesandbox.io/s/highcharts-vue-demo-mrg1t

Kind regards!

[ropoko]

just want to leave a message here that just happened to me:

dont forget to import the "exporting module"

import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'

exportingInit(Highcharts)