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>
<font onclick="addseries()">Click me</font>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  data: [{				
  	type: "area",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55},
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14}
    ]
  }]
});

chart.render();

chart.axisY[0].set("minimum", chart.axisY[0].get("minimum"), false);
chart.axisY[0].set("maximum", chart.axisY[0].get("maximum"), false);

function addseries()
{

chart.addTo("data", {
			type: "line", 
			lineDashType: "solid",
			color: "red",
			lineThickness: 1,
			toolTipContent: null,
			markerSize: 3,
			dataPoints: [
				{ x: 20, y: 120, markerType: "circle", indexLabel:"231", highlightEnabled: false },
				{ x: 40, y: 120 }
			]
		});
}