JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
JavaScript
window.onload = function() {
var chart = new CanvasJS.Chart('chartContainer', {
animationEnabled: true,
title:{
text: 'Submitted lawsuits'
},
axisX: {
lineThickness: 0,
tickThickness: 0,
gridThickness: 0,
interval: 1,
intervalType: 'day',
valueFormatString: "DD MMM"
},
axisY: {
interval: 1,
lineThickness: 0,
tickThickness: 0,
gridThickness: 0,
minimum: 0,
maximum: 2
},
toolTip:{
contentFormatter: function(e) {
return 'Date' +': '+ new Date( e.entries[0].dataPoint.x).toLocaleDateString('he-IL') +'<br>'+ 'Law suits' +': '+ e.entries[0].dataPoint.y + "";
}
},
data: [{
type: 'splineArea',
color: '#6368AE',
xValueType: "dateTime",
dataPoints: [{"x":1668463200000,"y":1},{"x":1668636000000,"y":2}]
}]
});
chart.render();
}