JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Esimate vs. Actual',
            x: -80
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Vinnies Italian', 'Studio B', 'Bochiro', 'Sage Builders', 'Annies', 'Electric Company', 'Boggs', 'Bodega', 'ADA', 'Cust 10', 'Cust 11', 'Cust 12', 'Cust 13', 'Cust 14', 'Cust 15', 'Cust 16', 'Cust 17', 'Cust 18', 'Cust 19', 'Cust 20'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Esimate',
            data: [113000, 19000, 20000, 35000, 139000, 45000, 59000, 55000, 69000, 70000, 79000, 85000, 89000, 95000, 109000 ],
            pointPlacement: 'on'
        }, {
            name: 'Actual',
            data: [90000, 19000, 22000, 31000, 76000, 42000, 51000, 52000, 61000, 68777, 72000, 81000, 82000, 91000, 10000 ],
            pointPlacement: 'on'
        }]

    });
});