JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="columnprogresschartdiv" style="background-color:#ffffff; width: 100%; height: 362px;"></div>

<div id="columntimechartdiv" style="background-color:#ffffff; width: 100%; height: 362px;"></div>

<div id="linetimechartdiv" style="background-color:#ffffff; width: 100%; height: 362px;"></div>

<div id="piecountchartdiv" style="background-color:#ffffff; width: 100%; height: 362px;"></div>

JavaScript

var addLabelSubscriptions = function(chart){
    chart.categoryAxis.addListener("rollOverItem", function (event) {
                event.target.setAttr("cursor", "default");
                event.chart.balloon.borderColor = event.serialDataItem.dataContext.color;
                event.chart.balloon.followCursor(true);
                event.chart.balloon.changeColor(event.serialDataItem.dataContext.color);
                event.chart.balloon.showBalloon(event.serialDataItem.dataContext.key + " - " + event.serialDataItem.dataContext.value);
            });

            chart.categoryAxis.addListener("rollOutItem", function (event) {
                event.chart.balloon.hide();
            });
}
    

AmCharts.themes.vc = {
    themeName: "vc",
    AmSerialChart: {
        "marginRight": 100
    },
    CategoryAxis: {
        "autoWrap": true,
        "gridPosition": "start",
        "axisAlpha": 0.3,
        "gridAlpha": 0
    },
    ValueAxis: {
    },
    AmGraph: {
        lineAlpha: 0.3
    },
    Title: {
        "color": "#666",
        "size": 11
    },
    Guide: {
        "above": true,
        "inside": false,
        "lineAlpha": 1,
        "lineThickness": 1,
        "linecolor": "#666",
        "fillcolor": "#666",
        "position": "right"
    }
};


var colours = ["#feeb1e", "#bada55", "#10aded", "#c0ffee", "#ba11ad", "#d00d1e", "#ca571e", "#babb1e", "#bee71e"];

var serverData = {
    chartType: "serial",
    title: "Title Lorem ipsum dolor sit amet, consectetur",
    valueTitle: "Average progress %",
    chartData: [{
        "key": "Steve Org", "value": 50 , "desc": "average progress:"}, {
        "key": "Louis Org", "value": 70 , "desc": "average progress:"}, {
        "key": "Bill Gates Org, which has a really long name", "value": 60 , "desc": "average progress:"}, {
        "key": "Nescafe Org", "value": 80 , "desc": "average progress:"}, {
        "key": "Meatloaf Org", "value": 40 , "desc": "average progress:"}, {
        "key": "Snoopy...