<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>
<body>
<canvas id="chartCanvas" style="display: none;"></canvas>
<div id="container"></div>
<script>
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
title: 'Countries',
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Medals in number'
},
//Initializing Chart Title
title: 'Olympic Medals',
//Initializing Chart Series
series: [
{
type: 'Column',
dataSource: [
{ country: "USA", medal: 50 },
{ country: "China", medal: 40 },
{ country: "Japan", medal: 70 },
{ country: "Australia", medal: 60 },
{ country: "France", medal: 30 },
],
xName: 'country',
yName: 'medal',
name: 'Medals',
marker: {
dataLabel: {
visible: true,
position: 'Top', // Change this to 'Top' to place the data labels above the bars
font: {
fontWeight: '600'
}
}
}
}
],
//Initializing Tooltip
tooltip: {
enable: true
}
});
chart.appendTo('#container');
// Convert the chart to an image
var canvas = document.getElementById('chartCanvas');
canvas.width = chart.element.offsetWidth;
canvas.height = chart.element.offsetHeight;
var context = canvas.getContext('2d');
chart.renderCanvas(context);
// Embed the image in the email
var img = document.createElement('img');
img.src=canvas.toDataURL('image/png');
document.body.appendChild(img);
</script>
</body>
</html>
