JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-7">
    <div class="panel panel-default">

      <div class="panel-heading">

        <strong><i class="fa fa-search fa-fw" style="padding-right: 5px"></i>Filters: &nbsp;&nbsp;</strong>

        <div class="dropdown" style="display: inline-block">
          <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Brands <span class="caret"></span></button>
          <ul class="dropdown-menu" id="products-list" role="menu" aria-labelledby="menu1">
            <input class="form-control dropdown-input" id="products-input" type="text" placeholder="Search.." style='margin-bottom: 10px' />
            <li role="presentation" class="divider"></li>
          </ul>
        </div>

        <div class="dropdown" style="display: inline-block">
          <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="menu2" data-toggle="dropdown">Consoles
            <span class="caret"></span></button>
          <ul class="dropdown-menu" id="builds-list" role="menu" aria-labelledby="menu2">
            <input class="form-control dropdown-input" id="builds-input" type="text" placeholder="Search.." style='margin-bottom: 10px' />
            <li role="presentation" class="divider"></li>
          </ul>
        </div>

        <div class="dropdown" style="display: inline-block">
          <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="menu3" data-toggle="dropdown">Periods
            <span class="caret"></span></button>
          <ul class="dropdown-menu" id="periods-list" role="menu" aria-labelledby="menu3">
            <li class='active'><a>Today</a></li>
            <li><a>This...

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "theme2",
  legend: {
    itemclick: toggleDataPointVisibility,
    horizontalAlign: "right", // left, center ,right 
    verticalAlign: "center", // top, center, bottom
    fontSize: 12,
    cursor: "pointer",
    fontColor: '#333',
    itemWrap: false
  },
  data: [{
    type: "doughnut",
    showInLegend: true,
    toolTipContent: "{y} - #percent %",
    yValueFormatString: "#,##0,,.## Million",
    legendText: "{indexLabel}",
    radius: 80,
    dataPoints: [{
      y: 3125844,
      indexLabel: "PlayStation 3"
    }, {
      y: 2175498,
      indexLabel: "Wii"
    }, {
      y: 3125844,
      indexLabel: "Xbox 360"
    }, {
      y: 1176121,
      indexLabel: "Nintendo DS"
    }, {
      y: 1727161,
      indexLabel: "PSP"
    }, {
      y: 4000000,
      indexLabel: "Nintendo 3DS"
    }, {
      y: 1717786,
      indexLabel: "PS Vita"
    }]
  }]
});
chart.render();

function toggleDataPointVisibility(e) {
  if (e.dataPoint.hasOwnProperty("actualYValue") && e.dataPoint.actualYValue !== null) {
    e.dataPoint.y = e.dataPoint.actualYValue;
    e.dataPoint.actualYValue = null;
    e.dataPoint.indexLabelFontSize = null;
    e.dataPoint.indexLabelLineThickness = null;
    e.dataPoint.legendMarkerType = "circle";
  } else {
    e.dataPoint.actualYValue = e.dataPoint.y;
    e.dataPoint.y = 0;
    e.dataPoint.indexLabelFontSize = 0;
    e.dataPoint.indexLabelLineThickness = 0;
    e.dataPoint.legendMarkerType = "cross";
  }
  chart.render();
}