JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/nnnick/Chart.js/master/Chart.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
}
]
}
var options = {
bezierCurve : false,
animation: false
};
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);
var url=myLine.toBase64Image();
document.getElementById("url").src=url;