JSFiddle - React, Tailwind, and code Playground

by nikcenter

JavaScript

var chart;

var chartData = [{
    country: "Цимбал Олексій Юрійович",
    відсотків: 6,
    },
{
    country: "Ireland",
    litres: 131.10,
    short: "IR"},
{
    country: "Germany",
    litres: 115.80,
    short: "DE"},
{
    country: "Australia",
    litres: 109.90,
    short: "AU"},
{
    country: "Austria",
    litres: 108.30,
    short: "AT"},
{
    country: "UK",
    litres: 99.00,
    short: "UK"},
{
    country: "Belgium",
    litres: 93.00,
    short: "BE"}];

AmCharts.ready(function() {
    // SERIAL CHART
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.rotate = true;
    chart.color = "#FFFFFF";

    // this line makes the chart to show image in the background
    chart.backgroundImage = "http://www.amcharts.com/lib/images/bg.jpg";

    // sometimes we need to set margins manually
    // autoMargins should be set to false in order chart to use custom margin values 
    chart.autoMargins = false;
    chart.marginTop = 100;
    chart.marginLeft = 50;
    chart.marginRight = 30;
    chart.startDuration = 2;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0;
    categoryAxis.axisAlpha = 0;
    categoryAxis.labelsEnabled = false;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridAlpha = 0;
    valueAxis.axisAlpha = 0;
    valueAxis.labelsEnabled = false;
    valueAxis.minimum = 0;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.balloonText = "[[category]]: [[value]]";
    graph.valueField = "відсотків";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 0.5;
    // you can pass any number of colors in array to create more fancy gradients
    graph.fillColors = ["#0000000", "#FF6600"];
    graph.gradientOrientation = "horizontal";
    graph.labelPosition = "bottom";
    graph.labelText = "[[category]]: [[value]] %";
   ...