JSFiddle - React, Tailwind, and code Playground

by sushant_ceb

HTML

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css">
<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/plugins/export/export.min.js"></script>

<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

/**
 * Create the chart
 */
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "category": "4",
    "value": 2025
  }, {
    "category": "5",
    "value": 1482
  }, {
    "category": "6",
    "value": 1809
  }, {
    "category": "7",
    "value": 1622
  }, {
    "category": "8",
    "value": 1122
  }, {
    "category": "9",
    "value": 1514
  }],
  "valueAxes": [{
    "gridColor": "#dddddd",
    "gridAlpha": 1,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "plotAreaBorderAlpha": 0.2,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletColor": "#f3f3f3",
    "lineColor": "#b0de09",
    "lineThickness": 3,
    "valueField": "value",
    "useLineColorForBulletBorder": true,
    "bulletBorderThickness": 3,
    "bulletBorderAlpha": 1
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "category",
  "categoryAxis": {
    "gridPosition": "middle",
    "gridAlpha": 0.02,
    "tickPosition": "middle",
    "listeners": [{
      "event": "clickItem",
      "method": function(e) {
       // console.log(e, window);
        e.target.setAttr("fill", "#CC0000");
        for(var i=0; i < e.axis.data.length; i++) {
        	//console.log(e.axis.data[i])	
        }
 e.chart.chartCursor.showCursorAt(e.value)
      }
    },{
    "event":"rollOutItem",
    "method": function(e) {
    	e.target.setAttr("fill", "#00000");
    }
    }],
  }
});