JSFiddle - React, Tailwind, and code Playground

by valinton

HTML

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

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

JavaScript

var dhd_sys = {"plan":[[100000],[200000],[300000],[400000],[500000],[600000],[700000],[800000],[900000],[1000000],[1100000],[1200000]],"idx":["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],"sum":[[5075],[28731.19],[28340.74],[235925.55],[110374],[173437.83],[0],[0],[0],[0],[0],[0]]};

$(function () {
    Highcharts.setOptions({
					lang: {
						decimalPoint: '.',
						thousandsSep: "'"
					}
				});
        $('#container').highcharts({
            title: {
                text: 'Доход системы',
            },
            xAxis: {
                categories: dhd_sys.idx,
                labels: {
                    rotation: -65,
                    align: 'right',
                },
            },
            yAxis: {
                title: {
                    text: 'План и доход грн'
                },
                 labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            },
            tooltip: {
                valueSuffix: 'грн',
                shared: true,
                crosshairs: true
            },

            series: [{
                name: 'План',
                type: 'spline',
                marker: {
                        enabled: false
                    },
                data: dhd_sys.plan
            }, {
                name: 'Доход',
                type: 'column',
                data: dhd_sys.sum
            }, ]
        });
    });