JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv" style="height: 288px; overflow: hidden;"></div>

JavaScript

am4core.useTheme(am4themes_animated);

// Create chart instance
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [];


for (let i = 10; i < 24; i += 1) {
    const amount = Math.floor(Math.random() * 20001) + 20000;
    chart.data.push({
    	date: `2021-01-11T${i}:00:00+00:00`,
      totalEquity: amount
    });
}


// initialization
const minValue = Math.min(...chart.data.map(el => el.totalEquity));
const valueAxis = addValueAxis(chart, minValue);
const dateAxis = setDateAxis(chart);
const series = setSeries(chart);
setRange(series, valueAxis, minValue);
addBullets(series);
addCursor(chart, dateAxis);
setZIndexes(chart);
toggleBulletsVisibility(chart, series, dateAxis);

chart.strokeWidth = 0;
chart.padding(0, 6, 0, 6);
chart.margin(0, 0, 0, 0);
chart.maskBullets = false;
chart.maskRectangle = undefined;

function setDateAxis(chart) {
  const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.grid.template.disabled = true;

  /* dateAxis.renderer.opposite = true */;
  configureDateAxisTooltip(dateAxis, chart);

  return dateAxis;
}

function addValueAxis(chart, minValue) {
  const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.grid.template.disabled = true;
  valueAxis.renderer.opposite = true;
  valueAxis.renderer.labels.template.fill = am4core.color('grey');
  valueAxis.renderer.labels.template.fontSize = 11;
  valueAxis.cursorTooltipEnabled = false;
  valueAxis.renderer.labels.template.align = 'right';
  valueAxis.paddingBottom = 32;

  if (minValue < 0) {
    valueAxis.renderer.baseGrid.stroke = am4core.color('grey');
    valueAxis.renderer.baseGrid.strokeWidth = 1;
    valueAxis.renderer.baseGrid.strokeDasharray = '4 4';
    valueAxis.renderer.baseGrid.strokeOpacity = 1;
  }

  return valueAxis;
}

function setRange(series, valueAxis, minValue) {
  // Create a range to change stroke for values below 0
  if (minValue < 0) {
    const range = valueAxis.createSeriesRange(series);
   ...