How to create area chart with react using highcharts

Question

I'm new with react and I would like to create an area chart with react so it will look like this:

I need:

• to display 2 different data (in the attached example, like 'USE' and 'USSR/Russia'
• the y axis should be percentage (25%, 50%, 75%, 100%)
• the x axis should be dates ( 24 May, 25 May , 26 May ...)

I couldn't find any example on how to achieve this kind of chart.

any ideas? or links to some example code

Answer 1

Here is the example of the area chart in Highcharts React Wrapper:

Simplified code:

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        series: [
          {
            type: 'area',
            data: [1, 2, 3]
          }
        ],
      }
    };
  }

  render() {
    return (
      <HighchartsReact
        highcharts={Highcharts}
        options={this.state.options}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

Demo: https://codesandbox.io/s/highcharts-react-demo-forked-hvtvky

Docs References: https://github.com/highcharts/highcharts-react https://www.highcharts.com/blog/tutorials/highcharts-react-wrapper/