JSFiddle - React, Tailwind, and code Playground

by ccarns

HTML

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

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            colors: [
                '#CCCCCC',
                '#336699'
                
            ],
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: [ '7', '8', '9', '10', '11', '12'],
                labels: false
            },
            yAxis: {
                title: {
                    text: 'US$'
                },
                min:0,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': $'+ this.y ;
                }
            },
            plotOptions: {
                series: {
                    shadow: false,
                    marker: {
                        radius: 3
                    }
                }
            },

            series: [
                {
                name: 'Projected',
                data: [0, 10000, 12000, 20000, 22000, 23000],
                color: '#CCCCCC',
                dashStyle: 'Dash',
                lineWidth: 1,
                showInLegend: false
            }, {
                name: 'Actual',
                data: [0, 10000, 15000, 24500, 26500, 27500],
                color: '#336699',
                lineWidth: 1,
                showInLegend: false
            }, ]
        });
    });
    
});