JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
	<body>
		<canvas id="canvas" height="450" width="600"></canvas>

        <img id="url" />
	</body>

CSS

canvas{
			}
img {
    border: 1px dashed red;
}

JavaScript

var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40],
					bezierCurve : false
				}
			]
			
		}
    
function done(){
  alert("haha");
  var url=myLine.toBase64Image();
  document.getElementById("url").src=url;
}
var options = {
  bezierCurve : false,
  animation: {
    onComplete: done
  }
};

	
var myLine = new Chart(document.getElementById("canvas").getContext("2d"),{
	data:lineChartData,
  type:"line",
  options:options
});