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="margin-left: 10px; height: 288px"></div>

JavaScript

am4core.useTheme(am4themes_animated);

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


for (let i = 1; i < 36; i += 1) {
    const amount = Math.floor(Math.random() * 20001) + 20000;
    chart.data.push({ date: new Date(2020, 0, i).toISOString(), totalEquity: amount });
}

// initialization
addValueAxis(chart);

const dateAxis = addDateAxis(chart);
const series = setSeries(chart);
addBullets(series);

addCursor(chart, dateAxis, series);
configureDateAxisTooltip(dateAxis);

setZIndexes(chart);

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

function setZIndexes(chart) {
  // eslint-disable-next-line no-param-reassign
  chart.cursor.zIndex = 10;
  // eslint-disable-next-line no-param-reassign
  chart.bulletsContainer.zIndex = 11;
}

function configureDateAxisTooltip(dateAxis) {
  const daxis = dateAxis;
  daxis.startLocation = 0.5;
  daxis.endLocation = 0.5;
  daxis.tooltipDateFormat = 'dd MMM yyyy';
  // daxis.numberFormatter.numberFormat = '#,###.##';
  daxis.renderer.tooltip.label.fontSize = 13;
  daxis.renderer.tooltip.background.opacity = 0;
  daxis.renderer.tooltip.label.html = '<div style="margin-left: 80px;">{text}</div>';
  daxis.adapter.add('getTooltipText', text => {
  return `
    <div class="mb-n1 ml-5">
    	<div>${text}</div>
    </div>
  `;
  });
  daxis.renderer.tooltip.label.fill = am4core.color('#000');
}

function addCursor(chart, dateAxis, series) {
  const cursor = new am4charts.XYCursor();

  // eslint-disable-next-line no-param-reassign
  chart.cursor = cursor;

  cursor.xAxis = dateAxis;

  cursor.lineX.strokeWidth = 1;
  cursor.lineX.strokeDasharray = '4 4';
  cursor.lineX.strokeOpacity = 1;
  cursor.lineX.disabled = true;

  cursor.behavior = 'none';
  cursor.lineY.disabled = true;

  cursor.lineY.tooltip.disabled = true;
  cursor.clickable = true;

 ...