AmChartExample.jsx

import React, { useRef, useLayoutEffect } 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 am4lang_pt_BR from '@amcharts/amcharts4/lang/pt_BR';
import * as am4plugins_rangeSelector from '@amcharts/amcharts4/plugins/rangeSelector';

am4core.useTheme(am4themes_animated);
am4core.options.autoDispose = true;

export default function AmChartExample({
  chartId,
  chartHeight,
  data,
  numSeries,
  style,
}) {
  const chart = useRef(null);
  console.log('data prop', data);

  useLayoutEffect(() => {
    let x = am4core.create(chartId, am4charts.XYChart);

    // Config
    x.language.locale = am4lang_pt_BR;
    x.cursor = new am4charts.XYCursor();
    x.background.fill = am4core.color('#1A1C1F');
    x.dateFormatter.dateFormat = 'dd/MM/YYYY';
    x.padding(0, 15, 0, 15);
    x.leftAxesContainer.layout = 'vertical';
    x.colors.step = 3;

    // Data
    x.data = data;

    // Create axes

    // Date
    const dateAxis = x.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.labels.template.fill = am4core.color('#E9E9E9');

    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.ticks.template.length = 8;
    dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.ticks.template.disabled = false;
    dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
    dateAxis.renderer.minLabelPosition = 0.01;
    dateAxis.renderer.maxLabelPosition = 0.99;
    dateAxis.keepSelection = true;

    dateAxis.groupData = true;
    dateAxis.minZoomCount = 5;

    // Values

    // 1
    const valueAxis = x.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.labels.template.fill = am4core.color('#E9E9E9');

    valueAxis.tooltip.disabled = true;
    valueAxis.zIndex = 1;
    valueAxis.renderer.baseGrid.disabled = true;

    valueAxis.height = am4core.percent(65);

    valueAxis.renderer.gridContainer.background.fill = am4core.color('#000000');
    valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
    valueAxis.renderer.inside = true;
    valueAxis.renderer.labels.template.verticalCenter = 'bottom';
    valueAxis.renderer.labels.template.padding(2, 2, 2, 2);

    valueAxis.renderer.fontSize = '0.8em';

    // 2
    const valueAxis2 = x.yAxes.push(new am4charts.ValueAxis());
    valueAxis2.renderer.labels.template.fill = am4core.color('#E9E9E9');

    valueAxis2.tooltip.disabled = true;
    valueAxis2.height = am4core.percent(35);
    valueAxis2.zIndex = 3;

    // this makes gap between panels
    valueAxis2.marginTop = 30;
    valueAxis2.renderer.baseGrid.disabled = true;
    valueAxis2.renderer.inside = true;
    valueAxis2.renderer.labels.template.verticalCenter = 'bottom';
    valueAxis2.renderer.labels.template.padding(2, 2, 2, 2);
    valueAxis2.renderer.fontSize = '0.8em';

    valueAxis2.renderer.gridContainer.background.fill = am4core.color(
      '#000000'
    );
    valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;

    // Create series dynamically from data
    if (data && numSeries > 0) {
      for (let index = 0; index <= data.numSeries; index++) {
        const series = x.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = 'date';
        series.dataFields.valueY = `price${index}Value`;
        /* series.tooltipText =
        "{name}: {valueY.changePercent.formatNumber('[#0c0]+#.00|[#c00]#.##|0')}%"; */
        series.name = `{price${index}Code}`;
        series.tooltip.getFillFromObject = false;
        series.tooltip.getStrokeFromObject = true;
        series.tooltip.background.fill = am4core.color('#fff');
        series.tooltip.background.strokeWidth = 2;
        series.tooltip.label.fill = series.stroke;
      }
    }

    console.log('chart data', x.data);

    /* if (x.series.length) {
      console.log('here');
      // Use a ref series to get some props like stroke
      const refSeries = x.series.values[0];

      const volumeSeries = x.series.push(new am4charts.StepLineSeries());
      volumeSeries.fillOpacity = 1;
      volumeSeries.fill = refSeries.properties.stroke;
      volumeSeries.stroke = refSeries.properties.stroke;
      volumeSeries.dataFields.dateX = 'date';
      volumeSeries.dataFields.valueY = 'quantity';
      volumeSeries.yAxis = valueAxis2;
      volumeSeries.tooltipText = 'Volume: {valueY.value}';
      volumeSeries.name = 'Series 2';
      // volume should be summed
      volumeSeries.groupFields.valueY = 'sum';
      volumeSeries.tooltip.label.fill = volumeSeries.stroke;

      // Scrollbar
      const scrollbarX = new am4charts.XYChartScrollbar();
      scrollbarX.series.push(refSeries);
      scrollbarX.marginBottom = 20;
      scrollbarX.background.fill = am4core.color('#E9E9E9');
      scrollbarX.background.fillOpacity = 0.2;
      scrollbarX.startGrip.background.fill = am4core.color('#1A1C1F');
      scrollbarX.endGrip.background.fill = am4core.color('#1A1C1F');
      scrollbarX.scrollbarChart.xAxes.getIndex(0).minHeight = undefined;

      const sbSeries = scrollbarX.scrollbarChart.series.getIndex(0);
      sbSeries.dataFields.valueYShow = undefined;

      x.scrollbarX = scrollbarX;
    } */

    // Add range selector
    const selector = new am4plugins_rangeSelector.DateAxisRangeSelector();
    selector.container = document.getElementById(`${chartId}-controls`);
    selector.axis = dateAxis;

    chart.current = x;

    return () => {
      x.dispose();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useLayoutEffect(() => {
    chart.current.data = data;
  }, [data]);

  return (
    <>
      <StyledRangeSelector id={`${chartId}-controls`}></StyledRangeSelector>
      <div
        id={chartId}
        style={{ width: '100%', height: chartHeight, ...style }}
      ></div>
    </>
  );
}