JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

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: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    var averages = [
            [1256406400000, 2150],
            [1256492800000, 2210],
            [1256579200000, 2304],
            [1256665600000, 2380],
            [1256752000000, 2140],
            [1256838400000, 2135],
            [1256924800000, 2830],
            [1257011200000, 2540],
            [1257097600000, 3648],
            [1257184000000, 2770],
            [1257270400000, 3259],
            [1257356800000, 2760],
            [1257443200000, 2970],
            [1257529600000, 3880],
            [1257616000000, 3770],
            [1257702400000, 3631],
            [1257788800000, 3280],
            [1257875200000, 3810]
        ];


    $('#container').highcharts({

        title: {
            text: 'График пополнения балансов.'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: 'Сумма',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value}.р',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '.р'
        },

        series: [{
            name: 'Зачисления',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }]
    });
});