Source: components/userComponents/monitoredArea/graph/TransitsTimeSeriesChart.js

import React from "react";
import { withNamespaces } from 'react-i18next';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

/**
 * Time series chart for transit statistics
 * @extends Component
 * @hideconstructor
 */
class TransitsTimeSeriesChart extends React.Component {
  /**
   * @constructs
   * @param props
   */
  constructor(props) {
    super(props);
    this.chart = undefined;
  }

  /**
   *
   */
  componentDidMount() {
    am4core.ready(() => {
      am4core.useTheme(am4themes_animated);

      this.chart = am4core.create("chart", am4charts.XYChart);
      this.chart.colors.step = 2;
      this.chart.data = this.props.data.chartData;

      const { t } = this.props;
      let dateAxis = this.chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.title.text = t('transitsTimeSeries.labelAxisX');
      dateAxis.renderer.minGridDistance = 50;

      let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.title.text = t('transitsTimeSeries.labelAxisY');
      valueAxis.renderer.line.strokeOpacity = 1;
      valueAxis.renderer.line.strokeWidth = 2;
      valueAxis.renderer.opposite = true;
      valueAxis.renderer.grid.template.disabled = true;

      if (this.props.data && this.props.data.transits) {
        this.props.data.transits.map(transit => {
          this.createAxisAndSeries(transit, transit);
        });
      }

      this.chart.legend = new am4charts.Legend();
      this.chart.cursor = new am4charts.XYCursor();
    });
  }

  /**
   * Create series
   * @param field
   * @param name
   */
  createAxisAndSeries = (field, name) => {

    let series = this.chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = field;
    series.dataFields.dateX = "date";
    series.strokeWidth = 2;
    series.yAxis = this.chart.yAxes.values[0];
    series.name = name;
    series.tooltipText = "{name}: [bold]{valueY}[/]";
    series.tensionX = 0.8;

    let interfaceColors = new am4core.InterfaceColorSet();

    let bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.circle.stroke = interfaceColors.getFor("background");
    bullet.circle.strokeWidth = 2;
  };

  /**
   *
   * @param prevProps
   * @param prevState
   * @param snapshot
   */
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.data !== this.props.data) {
      this.chart.data = this.props.data.chartData;
      if (this.chart.series.length === 0) {
        if (this.props.data && this.props.data.transits) {
          this.props.data.transits.map(transit => {
            this.createAxisAndSeries(transit, transit);
          });
        }
      }
    }
  }

  /**
   *
   * @returns {*}
   */
  render() {
    const { t } = this.props;
    return (
      <div className="box">
        <div className="box-header">
          <h1>
            {t('transitsTimeSeries.header')}
          </h1>
        </div>
        <div className="box-body">
          <div id="chart" style={{ height: '600px' }}/>
        </div>
      </div>
    )
  }
}

export default withNamespaces()(TransitsTimeSeriesChart);