JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="card-box">
  <div id="chartContainer" style="height: 500px; width: 100%;"></div>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title:{
    text: "Google - Consolidated Quarterly Revenue",
    fontFamily: "arial black",
    fontColor: "#695A42"
  },
  axisX: {
    interval: 1,
    intervalType: "year",
    scaleBreaks: {
    	spacing: 0,
      lineThickness: 0,
      customBreaks: [{
        startValue: new Date(2005, 06),
        endValue: new Date(2009, 06)
      }]
    }
  },
  axisY:{
    valueFormatString:"$#0bn",
    gridColor: "#B6B1A8",
    tickColor: "#B6B1A8"
  },
  toolTip: {
    shared: true,
    content: toolTipContent
  },
  data: [{
    type: "stackedColumn",
    showInLegend: true,
    color: "#696661",
    name: "Q1",
    dataPoints: [
      { y: 6.75, x: new Date(2005,0) },
      { y: 7.75, x: new Date(2010,0) },
      { y: 8.57, x: new Date(2011,0) },
      { y: 10.64, x: new Date(2012,0) },
      { y: 13.97, x: new Date(2013,0) },
      { y: 15.42, x: new Date(2014,0) },
      { y: 17.26, x: new Date(2015,0) },
      { y: 20.26, x: new Date(2016,0) }
    ]
  },
         {        
           type: "stackedColumn",
           showInLegend: true,
           name: "Q2",
           color: "#EDCA93",
           dataPoints: [
             { y: 6.82, x: new Date(2010,0) },
             { y: 9.02, x: new Date(2011,0) },
             { y: 11.80, x: new Date(2012,0) },
             { y: 14.11, x: new Date(2013,0) },
             { y: 15.96, x: new Date(2014,0) },
             { y: 17.73, x: new Date(2015,0) },
             { y: 21.5, x: new Date(2016,0) }
           ]
         },
         {        
           type: "stackedColumn",
           showInLegend: true,
           name: "Q3",
           color: "#695A42",
           dataPoints: [
             { y: 7.28, x: new Date(2010,0) },
             { y: 9.72, x: new Date(2011,0) },
             { y: 13.30, x: new Date(2012,0) },
             { y: 14.9, x: new Date(2013,0) },
             { y: 18.10, x: new Date(2014,0) },
             { y: 18.68, x: new...