JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript"
src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.canvasjs.com/canvasjs.stock.min.js"
></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = []
var stockChart = new CanvasJS.StockChart("chartContainer", {
theme: "light2",
title: {
text: "ETH/USD",
},
rangeChanging: function (e) {
const navigatorMin = e.minimum;
const navigatorMax = e.maximum;
const visiblePoints = dataPoints.filter((point) => {
const pointDate = new Date(point.x);
return pointDate >= navigatorMin && pointDate <= navigatorMax;
})
let minY = Math.min(...visiblePoints.map((point) => point.y[0]));
let maxY = Math.max(...visiblePoints.map((point) => point.y[0]));
const padding = (maxY - minY) * 0.1;
minY -= padding;
maxY += padding;
let step = Math.round((maxY - minY) / 10);
step = Math.ceil(step / 100) * 100;
minY = Math.floor(minY / 100) * 100;
maxY = Math.ceil(maxY / 100) * 100;
e.stockChart.options.charts[0].axisY.interval = step;
e.stockChart.options.charts[0].axisY.minimum = minY;
e.stockChart.options.charts[0].axisY.maximum = maxY;
},
charts: [
{
axisY: {
prefix: "$",
},
data: [
{
type: "candlestick",
yValueFormatString: "$#,###.##",
dataPoints: dataPoints,
},
],
},
],
rangeSelector: {
inputFields: {
startValue: new Date(2018, 03, 01),
...