JSFiddle - React, Tailwind, and code Playground

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/3.15.2-rc.1/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div style="height:500px;  width: 600px; background:url('https://github.com/Eric-revollo/testing/blob/master/images/clip.png?raw=true');background-repeat: no-repeat; ">

<div id="container" style="transform: scale(0.6,0.6)rotate(-76deg) translate(-52px,34px)skew(4deg,0);">
Chart will render here
</div>

</div>

JavaScript

FusionCharts.ready(function() {
  var topStores = new FusionCharts({
      type: 'column2d',
      renderAt: 'container',
      width: '500',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "applyCssTransform": "1",
          "theme": "fusion",
          "caption": "Team Statistics",          
          "alignCaptionWithCanvas": "0"
        },

        "data": [{
            "label": "Wins",
            "value": "20"
          },
          {
            "label": "Loses",
            "value": "9"
          },
          {
            "label": "Draws",
            "value": "5"
          }
        ]
      }
    })
    .render();


});