JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

Chart Group 1 min
<div id="chartdiv_group1" class="chartdiv"></div>

Chart Group 5 min
<div id="chartdiv_group5" class="chartdiv"></div>

Chart Group 10 min
<div id="chartdiv_group10" class="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.chartdiv {
  width: 100%;
  height: 300px;
  max-width: 100%;
}

JavaScript

var myData = [{"volume": 1, "open": 5, "close": 6, "high": "6", "low": "5", "date": new Date(2020, 10, 23, 10, 31)},
              {"volume": 1, "open": 6, "close": 7, "high": "7", "low": "6", "date": new Date(2020, 10, 23, 10, 32)},
              {"volume": 1, "open": 7, "close": 10, "high": "10", "low": "7", "date": new Date(2020, 10, 23, 10, 33)},
              {"volume": 1, "open": 9, "close": 5, "high": "9", "low": "5", "date": new Date(2020, 10, 23, 10, 34)},
              {"volume": 1, "open": 5, "close": 3, "high": "5", "low": "3", "date": new Date(2020, 10, 23, 10, 35)},
              {"volume": 1, "open": 3, "close": 6, "high": "6", "low": "3", "date": new Date(2020, 10, 23, 10, 36)},
              {"volume": 1, "open": 5, "close": 6, "high": "6", "low": "5", "date": new Date(2020, 10, 23, 10, 37)},
              {"volume": 1, "open": 7, "close": 5, "high": "7", "low": "5", "date": new Date(2020, 10, 23, 10, 38)},
              {"volume": 1, "open": 5, "close": 4, "high": "5", "low": "4", "date": new Date(2020, 10, 23, 10, 39)},
              {"volume": 1, "open": 4, "close": 7, "high": "7", "low": "4", "date": new Date(2020, 10, 23, 10, 40)},
              {"volume": 1, "open": 7, "close": 10, "high": "10", "low": "7", "date": new Date(2020, 10, 23, 10, 41)}];


// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart
var chart_1 = am4core.create("chartdiv_group1", am4charts.XYChart);
var chart_5 = am4core.create("chartdiv_group5", am4charts.XYChart);
var chart_10 = am4core.create("chartdiv_group10", am4charts.XYChart);

makeChart(chart_1, 1);
makeChart(chart_5, 5);
makeChart(chart_10, 10);


function makeChart(chart, minutes) {

  // Load data
  chart.data = myData;
  
  // the following line makes value axes to be arranged vertically.
  chart.leftAxesContainer.layout = "vertical";

  // uncomment this line if you want to change order of axes
  //chart.bottomAxesContainer.reverseOrder = true;

  var dateAxis =...