Text at the center of Doughnut Chart - CanvasJS
Text at the center of Doughnut Chart - CanvasJS
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="wrapper" style="height: 360px; width: 100%;position:relative;">
<div id="chartContainer" style="height: 100%; width: 100%;"></div>
</div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
subtitles: [
{
dockInsidePlotArea: true,
verticalAlign: "center",
horizontalAlign: "center",
text: "Doughnut Chart"
}
],
data: [
{
type: "doughnut",
dataPoints: [
{ y: 1245, indexLabel: "Q1 - 1,245 " },
{ y: 805, indexLabel: "Q2 - 805" },
{ y: 342, indexLabel: "Q3 - 342" },
{ y: 123, indexLabel: "Q4 - 123" },
]
}
]
});
chart.render();