JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>

<body>


<div id="chartdiv" style="margin-top: 0px !important; height: 300px; width: 400px;"></div>


<div>
Mon image<br/>
<img id="monImage" />
</div>



<script type="text/javascript">
window.onload = function() {

var chart = new CanvasJS.Chart("chartdiv",
{
	exportEnabled: false,
	animationEnabled: true,
	title:{
		//text: "Accounting"
	},
	legend:{
		horizontalAlign: "right",
		verticalAlign: "center"
	},

	data: [{
		type: "pie",
		yValueFormatString:"### ###",
		legend:{ fontweight: "lighter", fontSize: 10, maxWidth: 180, dockInsidePlotArea: false, horizontalAlign: "right" },
		showInLegend: true,
		toolTipContent: "<span style='\"'font-size: 12px;'\"'>{name}: {y} € (#percent%)</span>",
		//indexLabel: "{name}",
		indexLabel: "#percent%",
		
		//legendText: "{name} (#percent%)",
		legendText: "{name} - {y} €",
		indexLabelPlacement: "inside",
		indexLabelFontSize: 11,
		dataPoints: [
			{ y: 250, name: "Salaire NET" },
			{ y: 250, name: "Charges patronales" },
			{ y: 250, name: "Charges salariales" },
			{ y: 250, name: "Gestion Portage" },
			{ y: 250, name: "Impôts"},
			{ y: 250, name: "Mutuelle" },
			{ y: 250, name: "Frais divers" }
		]
	}]
});



chart.render();
setTimeout(function(){ 
	var base64Image = chart.canvas.toDataURL();
	document.getElementById('monImage').src = base64Image;
}, chart.get("animationDuration") + 500); //500ms extra

}



</script>

</body>

</html>

JavaScript

//var base64Image = chart.canvas.toDataURL();
//document.getElementById('imageMail').src = base64Image;

//var image = new Image();
//image.src = chart.canvas.toDataURL("image/png");
//alert( image.src );