Accessibility: Pie Chart with Aria-Label for the Chart-Container - CanvasJS JavaScript Charts

Accessibility: Pie Chart with Aria-Label for the Chart-Container - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
		theme: "light2", // "light1", "dark1", "dark2"
    animationEnabled: true,
    title: {
      	text: "Monthly Expenses"
    },
		data: [{
        type: "pie",
        showInLegend: "true",
        legendText: "{label}",
        yValueFormatString: "#,###\"%\"",
        indexLabelFontSize: 16,
        indexLabel: "{label} - {y}",
        dataPoints: [
            { label: "Accomodation", y: 30 },
            { label: "Food & Groceries", y: 25 },
            { label: "Utilities", y: 5 },
            { label: "Entertainment", y: 20 },
            { label: "Savings", y: 10 },
            { label: "Cellphone & Internet", y: 10 }
        ]
  }]
});

chart.render();

var chartDescription = "A Pie Chart showing monthly expenses of a person where in which he spends 30% on accomodation, 25% on Food & Groceries, 20% on Entertainment, 10% as Cellphone & Internet charges, 5% utilities. And he saves 10% after all his expenses";
chart.overlaidCanvas.setAttribute("aria-label", chartDescription);
chart.overlaidCanvas.setAttribute("tabindex", 1);