JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 300px; height: 200px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
            inverted: true
        },
        title: {
            text: 'Expenditure Chart'
        },
        tooltip: {
                        formatter: function () {
                if (this.x > 0) {
                    return 'USD '+this.y +' million';
                } else { return false; }
            }

        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: [
                '',
                '2010',
                '',
                '',
                '',
                '2011',
                ''],
            lineWidth: 0,
            tickWidth: 0

        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            gridLineColor: '#ffffff',
            min: 0
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            },
            area: {
                fillOpacity: 0.5,

            },


        },
        series: [{
            name: '2010',
            data: [0, 3, 0, null, null, null, null],
            marker: {
                    symbol: 'circle'
            }

        }, {
            name: '2011',
            data: [2, null, null, null, 0, 6, 0],
                        marker: {
                    symbol: 'triangle'
            }


        }],

    });
});