JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/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>

CSS

:root {
  --bg-red: red;
  --bg-green: green;
}

JavaScript

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
      text: "Desktop Search Engine Market Share - 2016"
    },
    data: [{
      type: "pie",
      startAngle: 240,
      yValueFormatString: "##0.00\"%\"",
      indexLabel: "{label} {y}",
      dataPoints: [
        {y: 79.45, label: "Google", color: getCSSVarValue('--bg-red')},
        {y: 7.31, label: "Bing", color: getCSSVarValue('--bg-green')},
      ]
    }]
  });
  chart.render();

  function getCSSVarValue(name) {
    return getComputedStyle(document.getElementById('chartContainer')).getPropertyValue(name);
  }


}