JSFiddle - React, Tailwind, and code Playground

by santhucool007

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 300px; height: 120px;"></div>

JavaScript

AmCharts.ready(function () {

        var chart = new AmCharts.AmSerialChart();
 chartData =[{"questionnumber":"1","percentage":100,"color":"#ffdf97"},{"questionnumber":"2","percentage":50,"color":"#3db8c7"},{"questionnumber":"3","percentage":50,"color":null},{"questionnumber":"4","percentage":50,"color":"#ff9900"},{"questionnumber":"5","percentage":50,"color":"#2175d9"},{"questionnumber":"6","percentage":50,"color":"#ec0974"},{"questionnumber":"7","percentage":50,"color":"#3db8c7"},{"questionnumber":"8","percentage":50,"color":"#ec0974"},{"questionnumber":"9","percentage":0,"color":"#ff9900"},{"questionnumber":"10","percentage":50,"color":"#40b000"}]
        
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        chart.categoryField = "questionnumber";
        chart.startDuration = 3;
        chart.sequencedAnimation = false;

        // VALUE AXIS
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.axisAlpha = 0.15;
        valueAxis.minimum = 0;
        valueAxis.dashLength = 3;
        chart.addValueAxis(valueAxis);

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.type = "column";
        graph.colorField = "color"
        graph.valueField = "percentage";
        graph.fillAlphas = 0.6;
        graph.balloonText = "[[value]]%";
        chart.addGraph(graph);

        // WRITE in div
        chart.write("chartdiv");
 
});