JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'pie'
    },
    title: {
        text: 'Projects'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function () {
                    return '<strong>' + this.point.name + '</strong>: ' + this.y + ' %';
                }
            }
        }
    },
    colors: [
        '#4572A7',
        '#AA4643',
        '#DB843D'
    ],
    series: []
};

$.get('https://rawgit.com/guilhermeramos816/accenture/master/testi.csv', function (data) {
    // Split the lines
    var lines = data.split('\n');
    var series = {
        data: [],
    };

    // Iterate over the lines and add categories or series
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');

        series.data.push({
            type: 'bar',
            name: items[0],
            y: parseFloat(items[1])
        });
    });

    options.series.push(series);
    // Create the chart
    var chart = new Highcharts.Chart(options);
});
});