JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"> </script>
<body>
<div id="share_ofvoicess_carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#share_ofvoicess_carousel" data-slide-to="0" class="active"></li>
    <li data-target="#share_ofvoicess_carousel" data-slide-to="1"></li>
    
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="active item">  
      <div id="chartContainer1" class="chart" style="width:100%; height:300px;"></div>
    </div>
    <div class="item">
      <div id="chartContainer2" class="chart" style="width:100%; height:300px;"></div>
    </div>
    
    </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#share_ofvoicess_carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#share_ofvoicess_carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- Carousel -->
</body>

CSS

#second_donut .canvasjs-chart-container {
width: 100% !important;
}


#first_donut .canvasjs-chart-container .canvasjs-chart-canvas {
    height: 280px !important;
    margin-left: -25px !important;
    width: 280px !important;
    margin-top: 10px;
}
#second_donut .canvasjs-chart-container .canvasjs-chart-canvas {
   /* height: 275px !important;*/
    width: 280px !important;
   /* margin-left: -55px !important;*/
    margin-top: 35px;
}
.shareofvoice .canvasjs-chart-container .canvasjs-chart-canvas{width:229px !important;height:283px !important;}*/

#share_ofvoicess_carousel .left.carousel-control {
  width: 25px;width: 2vw;
  top: 50%;
  background: none; }
#share_ofvoicess_carousel .right.carousel-control {
  width: 25px;width: 2vw;
  top: 50%;
  background: none; }
#share_ofvoicess_carousel .carousel-inner {
  margin: 0 auto;
  width: 90%; }
#share_ofvoicess_carousel .item{
  height: 285px;
}

JavaScript

var chart;
var charts = [];
var width;
var height;

width = $('#share_ofvoicess_carousel').width();
height = $('#share_ofvoicess_carousel').height();

$('.carousel').carousel({
    interval: 200000000
});

chart = new CanvasJS.Chart("chartContainer1",
{
animationEnabled:true,
title:{
},
legend:{
verticalAlign: "center",
horizontalAlign: "right"
},
    width: width,
    height: height,
data: [
{
indexLabelFontColor: "transparent",
indexLabelPlacement: "insdie",
type: "doughnut",
dataPoints: [
{y: 33, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Intel &nbsp;</td></tr><tr><td class=rightCol style=color:#cc3939>(775 Mentions)</td></tr><tr><td> 33% </td></tr></table>", color:"#cc3939" },
{y: 17, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Samsung &nbsp;</td></tr><tr><td class=rightCol style=color:#FCAA47>(396 Mentions)</td></tr><tr><td> 17% </td></tr></table>", color:"#FCAA47" },
{y: 10, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>VIA &nbsp;</td></tr><tr><td class=rightCol style=color:#0087c4>(246 Mentions)</td></tr><tr><td> 10% </td></tr></table>", color:"#0087c4" },
{y: 8, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Apple &nbsp;</td></tr><tr><td class=rightCol style=color:#878787>(192 Mentions)</td></tr><tr><td> 8% </td></tr></table>", color:"#878787" },
{y: 7, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Qualcomm &nbsp;</td></tr><tr><td class=rightCol style=color:#c152b8>(177 Mentions)</td></tr><tr><td> 7% </td></tr></table>", color:"#c152b8" },
{y: 25, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Others &nbsp;</td></tr><tr><td class=rightCol...