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

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

am4core.useTheme(am4themes_animated);


/**
 * Component which contains the dynamic state for the chart
 * @extends Component
 * @hideconstructor
 */
class ChartOfTransits extends Component {

  /**
   *
   * @param data
   * @returns {XYChart}
   */
    createHistoGraph = (data) => {
      const { t } = this.props;
        // Create chart instance
        let chart = am4core.create("chartdiv", am4charts.XYChart);

        chart.data = data;
        chart.data.sort((a, b) => a.count - b.count);

        // Create axes
        let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "name";
        categoryAxis.title.text = t('graph.transits');
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 25;
        //categoryAxis.renderer.labels.template.rotation = 50;
        categoryAxis.renderer.labels.template.verticalCenter = "middle";
        categoryAxis.renderer.labels.template.horizontalCenter = "left";
        categoryAxis.renderer.labels.template.wrap = true;
        categoryAxis.renderer.labels.template.maxWidth = 420;
        categoryAxis.renderer.labels.template.fontSize = 10;

        let valueAxis = chart.xAxes.push(new am4charts.ValueAxis( ));
        valueAxis.title.text = t('graph.numberOfPassedVehicles');

        // Create series
        let series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueX = "count";
        series.dataFields.categoryY = "name";
        series.columns.template.tooltipText = "{categoryY}: {valueX}";

        /* Create a heat rule */
        series.heatRules.push({
            "target": series.columns.template,
            "property": "fill",
            "min": am4core.color("#adf58c"),
            "max": am4core.color("#ed8186"),
            "dataField": "valueX"
        });

        //Set cell size in pixels
        let cellSize = 40;
        //kicks in at the moment when chart has finished processing its data.
        chart.events.on("datavalidated", function(ev) {

            // Get objects of interest
            let chart = ev.target;
            let categoryAxis = chart.yAxes.getIndex(0);

            // Calculate how we need to adjust chart height
            let adjustHeight;
            if(chart.data.length < 2){
                adjustHeight = 2 * cellSize - categoryAxis.pixelHeight;
            } else {
                adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;
            }


            // get current chart height
            let targetHeight = chart.pixelHeight + adjustHeight;
            // Set it on chart's container
            chart.svgContainer.htmlElement.style.height = targetHeight + "px";
        });

        return chart;

    }

    /**
     */
    componentDidMount() {
        this.chart = this.createHistoGraph(this.props.data);
    }
/**
 */
    componentDidUpdate() {
        this.chart = this.createHistoGraph(this.props.data);
    }

/**
 */
    componentWillUnmount() {
        if (this.chart) {
            this.chart.dispose();
        }
    }
/**
 */
    render() {
      const { t } = this.props;
        return(
        <div>
            <div className="box">
                <div className="box-header">
                    <div className="col-md-6">
                        <h3 className="box-title text-right">{t('graph.graphOfPassedVehicles')}</h3>

                    </div>

                </div>

                <div className="box-body">

                    {<div id="chartdiv">
                                          </div>}
                    <br/>

                </div>
                <div className="box-footer">
                    {/*<p className="text-right">* number of passings per hour</p>*/}
                </div>
            </div>


        </div>
        )

        // if(this.props.data){
        //     return (
        //         <div>
        //             <div className="box">
        //                 <div className="box-header">
        //                     <div className="col-md-6">
        //                         <h3 className="box-title text-right" >Chart of passed vehicles</h3>
        //                     </div>
        //                 </div>
        //                 <div className="box-body">
        //                     {<div id="chartdiv">
        //                     </div>}
        //                 </div>
        //             </div>
        //         </div>
        //     );
        // }
        // else {
        //     return (<div>Loading...</div>)
        // }


    }
}

export default withNamespaces()(ChartOfTransits);