JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

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

JavaScript

window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
      text: "Das können Sie beim Widerspruch einer Lebensversicherung herausholen:",
      fontFamily: "arial black",
      fontColor: "#695A42"
    },
    axisX: {
      display: false,
      interval: 1,
      intervalType: "year"
    },
    axisY: {
      display: false,
      valueFormatString: "$#0bn",
      gridColor: "#B6B1A8",
      tickColor: "#B6B1A8"
    },
    toolTip: {
      shared: false
    },
    data: [{
        type: "stackedColumn",
        showInLegend: true,
        color: "#134d59",
        name: "Q1",
        dataPoints: [{
            y: 6.75,
            x: new Date(2010, 0)
          },
          {
            y: 8.57,
            x: new Date(2011, 0)
          },
          {
            y: 10.64,
            x: new Date(2012, 0)
          }
        ]
      },
      {
        type: "stackedColumn",
        showInLegend: true,
        name: "Q2",
        color: "green",
        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) }

        ]
      },
      {
        type: "stackedColumn",
        showInLegend: true,
        name: "Q3",
        color: "blue",
        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)
          }
        ]
      }
    ]
  });
  chart.render();

  function toolTipContent(e) {
    var str = "";
    var total = 0;
    var str2, str3;
    for (var i = 0; i < e.entries.length; i++) {
      var str1 = "<span style= \"color:" + e.entries[i].dataSeries.color + "\"> " + e.entries[i].dataSeries.name + "</span>: $<strong>" + e.entries[i].dataPoint.y + "</strong>bn<br/>";
      total = e.entries[i].dataPoint.y + total;
      str =...