JSFiddle - React, Tailwind, and code Playground

by Rohan Kumar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<button id="cmd">HTML2Canvas</button>
<div id="output">
  <div id="chartdiv1">
  </div>
</div>

CSS

#chartdiv1 {
  width: 100%;
  height: 500px;
}

JavaScript

$(document).ready(function() {
  var chart = AmCharts.makeChart("chartdiv1", {
    "type": "serial",
    "theme": "light",
    "dataProvider": [{
      "country": "USA",
      "visits": 2025
    }, {
      "country": "China",
      "visits": 1882
    }, {
      "country": "Japan",
      "visits": 1809
    }, {
      "country": "Germany",
      "visits": 1322
    }, {
      "country": "UK",
      "visits": 1122
    }, {
      "country": "France",
      "visits": 1114
    }, {
      "country": "India",
      "visits": 984
    }, {
      "country": "Spain",
      "visits": 711
    }, {
      "country": "Netherlands",
      "visits": 665
    }, {
      "country": "Russia",
      "visits": 580
    }, {
      "country": "South Korea",
      "visits": 443
    }, {
      "country": "Canada",
      "visits": 441
    }, {
      "country": "Brazil",
      "visits": 395
    }],
    "valueAxes": [{
      "gridColor": "#FFFFFF",
      "gridAlpha": 0.2,
      "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
      "balloonText": "[[category]]: <b>[[value]]</b>",
      "fillAlphas": 0.8,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "visits"
    }],
    "chartCursor": {
      "categoryBalloonEnabled": false,
      "cursorAlpha": 0,
      "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
      "gridPosition": "start",
      "gridAlpha": 0,
      "tickPosition": "start",
      "tickLength": 20
    }

  });

  function printOptions(type = 'before') {
    var svg = chart.div.querySelector('svg');
    if (svg) {
      if (type == 'after') { // remove the attributes after generating canvas
        svg.removeAttribute('width');
        svg.removeAttribute('height');
      } else { // set width and height according to parent container
        svg.setAttribute('width', chart.div.clientWidth);
        svg.setAttribute('height', chart.div.clientHeight);
      }
      chart.validateNow(); //...