JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
      <button style="margin-left:300px; margin-top:10px" type="button" id="btn" onclick="showchart()">Show my chart</button>
        <div id="chartContainer"  style ="height: 300px; width: 100%;margin: 50px auto;"></div>

JavaScript

function showchart()
{
  var that = this;

	var dataPoints = [];
	var dataPointsExpense = [];

	//calling function for y2 axis
	function addDataExpense(result)
	{

		for (var i = 0; i < result.length; i++)
		{
			dataPointsExpense.push({
				x: new Date(result[i].day + result[i].month + result[i].year),
				y: result[i].ExpenseofMonth


			});
		}

		that.chart.render();

	}
	//calling finctions for income
	function addData(result)
	{
		console.log(result);
		for (var i = 0; i < result.length; i++)
		{
			dataPoints.push({
				x: new Date(result[i].day + result[i].month + result[i].year),
				y: result[i].IncomeofMonth
			}

			);
		}
		that.chart.render();

		addDataExpense(result)
	}


	//canvas coding
	var chart = {

		exportEnabled: true,
		animationEnabled: true,
		title: {
			text: "Income Vs Expense of the Month"
		},
		subtitles: [{
			text: "This will Show You Expense plus Income of the Month"
		}],
		axisX: {
			title: "States"
		},
		axisY: {
			title: "Income of the Month",
			titleFontColor: "#4F81BC",
			lineColor: "#4F81BC",
			labelFontColor: "#4F81BC",
			tickColor: "#4F81BC",
			titleFontSize: 24,
			includeZero: false
		},
		axisY2: {
			title: "Expense of the Month",
			titleFontColor: "#C0504E",
			lineColor: "#C0504E",
			labelFontColor: "#C0504E",
			tickColor: "#C0504E",
			titleFontSize: 24,
			includeZero: false
		},
		toolTip: {
			shared: true
		},
		legend: {
			cursor: "pointer",
			itemclick: toggleDataSeries
		},

		data:

			[{
				type: "spline",
				name: "Income of the Month",
				showInLegend: true,
				xValueFormatString: "MMM YYYY",
				yValueFormatString: "Rs ####",
				dataPoints: dataPoints

			},
			{
				type: "spline",
				name: "Expense of the Month",
				axisYType: "secondary",
				showInLegend: true,
				xValueFormatString: "MMM YYYY",
				yValueFormatString: "Rs ###",
				dataPoints: dataPointsExpense
			}
			]
	};
	chart = $("#chartContainer").CanvasJSChart(chart);

	function toggleDataSeries(e)
	{
		if (typeof...