Can't Pass Existing Chart Options & Data Using defaultChartOptions

[spaceninja]

We're using the Chart Editor in a CMS as a custom field. The CMS displays a "create chart" button, which opens a popup window containing the Highcharts Editor. When that window is closed, it sends the results of editor.getEmbeddableJSON() back to the CMS, where it's saved and used to display a preview. That much is working perfectly.

However, there's no way to edit a chart once it's created. Looking at the documentation, it looks like we can pass that JSON config back to the Chart Editor as the defaultChartOptions, but when I do this, I see the chart momentarily display and then disappear. The data never displays in the data table, and some options are never applied (eg, our example was a pie chart, but it displayed in the editor as a line chart).

The "chart displays and then disappears" behavior is also described in #186

The data not showing up is described in #161, but the solution described doesn't work. I'm assuming because the solution was applied to v0.2.1, and I'm using v0.3.0?

Expected behaviour

I should be able to pass the JSON config object for a chart previously created with the Chart Editor back to the Chart Editor (via defaultChartOptions or some other means) to allow my users to edit that chart.

Actual behaviour

Passing the JSON config object back to the defaultChartOptions does not apply all the chart configuration, and does not preserve the chart's data.

Reproduction steps

https://jsfiddle.net/spaceninja00/8nuq60o9/3/

Editor version

highcharts-editor.complete.js v0.3.0

Affected browser(s)

All

[KacperMadej]

Thank you for reporting the problem.

@cvasseng - the code is quite old and might have been changed but maybe there is something wrongly used and this could work?

[WebBeest]

I've had this problem as well (posting this for anyone who comes here after Googling ;-)) and this worked for me:

const currentOptions = {"chart":{"type":"line"},"title":{"text":"My Chart"},"subtitle":{"text":""},"exporting":{},"series":[{"name":"Value","marker":{}}],"plotOptions":{"series":{"animation":false}},"data":{"csv":"\"Key\";\"Value\"\n1;5\n2;8\n3;25\n4;10\n5;35\n6;58","googleSpreadsheetKey":false,"googleSpreadsheetWorksheet":false},"yAxis":[{"title":{}}]}

 let csvData = '';

 if (currentOptions.data !== undefined) {
   csvData = currentOptions.data.csv;
}

const modal = highed.ModalEditor(el, {
  defaultChartOptions: currentOptions,
  allowDone: true,
  features: 'import templates customize done',
  importer: {
    options: 'plugins csv json'
  }
}, function (chart) {
  // do something with the data.
});

// Clear the current table, otherwise it will show "Column 1", "Column 2".
modal.editor.dataTable.clear();

// Load the CSV data from the defaultOptions.
modal.editor.dataTable.loadCSV({csv: csvData});