JSFiddle - React, Tailwind, and code Playground

by guilhermemaranhao

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Olympic Medals of all Times (till 2012 Olympics)"
      },
      data: [
      {
        type: "bar",
        dataPoints: [
        { y: 201, label: "China"}
        ],
        indexLabelFormatter: function(e){
        				return e.dataPoint.y;
              },
              indexLabelFontWeight: "normal",
                          indexLabelFontFamily: "Open Sans",
                          indexLabelFontColor: "black",
                          indexLabelFontSize: 16
      },
      {
        type: "bar",
        dataPoints: [
        { y: 144, label: "China"}
        ],
         indexLabelFormatter: function(e){
        				return e.dataPoint.y;
              },
              indexLabelFontWeight: "normal",
                          indexLabelFontFamily: "Open Sans",
                          indexLabelFontColor: "black",
                          indexLabelFontSize: 16
      },
      {
        type: "bar",
        dataPoints: [
        { y: 128, label: "China"}
        ],
                 indexLabelFormatter: function(e){
        				return e.dataPoint.y;
              },
              indexLabelFontWeight: "normal",
                          indexLabelFontFamily: "Open Sans",
                          indexLabelFontColor: "black",
                          indexLabelFontSize: 16
      }
      ]
    });

chart.render();