JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Spline Chart"
},
axisY:{
gridThickness: 0
},
axisX:{
minimum: 0
},
data: [
{
type: "spline",
dataPoints: [
{ x: 0, y: 13 },
{ x: 1, y: 15 },
{ x: 2, y: 13 },
{ x: 3, y: 11 },
{ x: 4, y: 9 },
{ x: 5, y: 12 },
{ x: 6, y: 11 },
{ x: 7, y: 12 },
{ x: 8, y: 14 },
{ x: 9, y: 13 },
]
},
{
type: "line",
markerType: "none",
lineDashType: "dash",
color:"black",
toolTipContent: null,
dataPoints: [
{x: 0, y: 10},
{x: 3, y: 10}
]
},
{
type: "line",
markerType: "none",
lineDashType: "dash",
color:"black",
toolTipContent: null,
dataPoints: [
{x: 3, y: 11},
{x: 7, y: 11}
]
}
]
});
chart.render();
}