elmounadia
Posts: 1
Joined: Tue May 02, 2023 11:17 am

How to Push data from highcharts to highcharts editor

Im using reactjs with highcharts and highchart editor, Im displaying a highchart and this highchart has an edit button when i click on edit, the highchart editor opens with the same chart, I can edit everything except for the values. I cant also find the values in the CHART DATA section. How can i achiave that?

Code: Select all

  useEffect(() => {
    conversation.forEach((item, index) => {
      if (item.highchartCode) {
        window.highed.ready(function () {
          const chartOptions = parseHighchartOptions(item.highchartCode);

          const chart = window.Highcharts.chart('highchartId', chartOptions);
          const csvData = chart.getCSV();

          const newModal = window.highed.ModalEditor(modalButtonRefs.current[index], {
            allowDone: true,
            defaultChartOptions: chartOptions,
            features: 'import export templates customize welcome done',
            importer: {
              options: 'plugins csv json samples',
            },
          }, function (chart) {
            const html = chart.export.html(true);
          });
       
          newModal.editor.chart.on('New', newModal.editor.chart.data.csv(csvData));
        });
      }
    });
  }, [conversation]);
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: How to Push data from highcharts to highcharts editor

Hello elmounadia,

Welcome to our forum and thanks for contacting us with your question!

Note that Highcharts Editor is no longer supported, and as you can read here: https://github.com/highcharts/highcharts-editor, there's a beta version provided.

First of all, I'd recommend taking a look at a similar topic on our forum: viewtopic.php?t=41024.

As the problem is strictly related to the data, maybe you should take a closer look at the generated CSV, have you tried passing the pure, random CSV instead of getting it from the chart? Note that the getCSV method needs the export-data module that in React should be initialized that way:

Code: Select all

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

...

HC_exporting(Highcharts)

Unfortunately, it's hard for me to help you more as I don't see your whole implementation. If the above suggestion wouldn't be helpful, could you reproduce your code in an online editor? Since you're using React, you can start here: https://codesandbox.io/s/highcharts-rea ... ked-bsk704 and send me a forked link.

Looking forward to your response,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Stock”