JSFiddle - React, Tailwind, and code Playground

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.container.querySelector(".canvasjs-chart-canvas").setAttribute("aria-label", chartDescription);
chart.overlaidCanvas.setAttribute("aria-hidden", true);