Use exported data from Highcharts Editor in a new React chart

Question

I am trying to implement the following workflow

1. Create a chart using Highcharts Editor
2. Export the JSON object from the Editor representing the chart
3. Use the exported JSON to render a new chart

When I create a chart via the editor and export the JSON, I get the following:

{
  "title": { "text": "Geese Throughout the Year" },
  "subtitle": { "text": "An exercise in passive observation" },
  "exporting": {},
  "yAxis": { "title": { "text": "Number of Geese" }, "labels": {} },
  "series": [{ "name": "Geese", "turboThreshold": 0, "marker": {} }],
  "plotOptions": { "series": { "animation": false } },
  "data": {
    "csv": "\"Month\";\"Geese\"\n\"January\";56\n\"February\";60\n\"March\";73\n\"April\";55\n\"May\";32\n\"June\";14\n\"July\";10\n\"August\";10\n\"September\";19\n\"October\";40\n\"November\";44\n\"December\";47",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  },
  "chart": {},
  "xAxis": { "title": { "text": "Month" }, "labels": {} },
  "legend": {}
}

Then I try to use this data as options for a new HighchartsReact component

import * as React from "react";
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

var options = {
  title: { text: "Geese Throughout the Year" },
  subtitle: { text: "An exercise in passive observation" },
  exporting: {},
  yAxis: [{ title: { text: "Number of Geese" }, labels: {} }],
  series: [{ name: "Geese", turboThreshold: 0, marker: {} }],
  plotOptions: { series: { animation: false } },
  data: {
    csv:
      '"Month";"Geese"\n"January";56\n"February";60\n"March";73\n"April";55\n"May";32\n"June";14\n"July";10\n"August";10\n"September";19\n"October";40\n"November";44\n"December";47'
  },
  chart: {},
  xAxis: [{ title: { text: "Month" }, labels: {} }],
  legend: {}
};

export default function ChartContainer(props: HighchartsReact.Props) {
  return <HighchartsReact highcharts={Highcharts} options={options} />;
}

But when I view the rendered component in a browser, the axes and title are rendered, but the data does not appear. Image of partially-rendered chart

I assumed that the exported JSON could be used as options for a new chart, but I seem to be missing something.

Is there some kind of additional mapping step that needs to be done between the exported JSON and the options passed to a new chart?

Answer 1

I think the problem is the way you're trying to call/export your component. I tried to use your options on other project and it worked as expected.