JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Basic Column Chart"
},
height: 250,
axisX: {
valueFormatString: "MM/DD/YYYY",
intervalType: "month",
interval: 1,
labelAutoFit: false
},
axisY2: {
includeZero: false,
suffix: "K",
margin: 5,
labelFormatter: function(e) {
return e.value/1000;
},
gridThickness: .5,
tickLength: 0,
},
data: [{
type: "area",
axisYType: "secondary",
fillOpacity: ".5",
yValueFormatString: "$###0.00",
xValueFormatString: "MM/DD/YYYY",
dataPoints: [
{ x: new Date('1/11/2021'), y:20332.443440824},
//{ x: new Date('1/12/2021'), y:20332.443440824}
],
}]
});
chart.render();