Ability to export a graph

[SadikMoazzem]

Feature Request

Description

Be able to use the useChart Hook to access other methods on the Chart class

@anajavi Is there any reason they haven't been added in already, i see there is a few added in without types currently.

[SadikMoazzem]

It can be added in here, but I am not able to create a branch to open a PR currently!
packages/react-jsx-highcharts/src/components/BaseChart/createProvidedChart.js

[farridav]

Given its a one line change, perhaps you can make a pull request for this?

• Fork this repo
• Make your changes
• Create a pull request against this repo

[anajavi]

The chart is already accessible with useChart:

const c = useChart();
const chart = c.object;

[SadikMoazzem]

I am trying to access the "exportChart" method, which doesn't exist on the chart obj

Looking to add it to the exposed interface in "BaseChart/createProvidedChart.js" or wherever it should fit

[anajavi]

I am trying to access the "exportChart" method, which doesn't exist on the chart obj

There probably isn't typescript definition for exportChart as it is added via highcharts module.

Did you try to run your code ignoring typescript warnings for exportChart?

[ozadari5]

#375
Hey, why aren't you merging this?

[azorzin]

Hi @anajavi could you please merge this?
Or is another way to do the chart export?

[anajavi]

Hi @anajavi could you please merge this? Or is another way to do the chart export?

Doesn't the following work?

const c = useChart();
const chart = c.object();
chart.exportChart();

At least with highcharts 12 importing exporting module brings the typescript types for exportChart:

import 'highcharts/modules/exporting';

[azorzin]

Hi, thanks for the reply.
I am using highstock and trying to export the graph data to csv. In the graph I have a series and some flags.
Using "exporting" and "export-data" modules the flags are not exported.
I would like to manage the export manually.

Starting from the example in the "Highstocks Example" documentation I include:
import 'highcharts/modules/exporting';
import 'highcharts/modules/export-data';
In chart definition:
<HighchartsStockChart exporting={exporting}>

and exporting object

const exporting = {
    menuItemDefinitions: {
      custom: {
        text: 'myExport',
        onclick: () => {
            //do something
        }
      }
    },
    buttons: {
      contextButton: {
        menuItems: ['custom']
      }
    }
  };

but in "onclick" function I can't use the hook useChart, that's why I thought of overriding the exportChart function.

Update: I found an alternative solution using "chart.events.exportData"