Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

<div id="container" style="height: 500px; min-width: 310px"></div>

JavaScript

function genData() {
    var data = [],
        i;

    for (i = 0; i < 500; i++) {
        data.push([
            1532439000000 + i * 3600000,
            Math.floor(Math.random() * 100)
        ]);
    }

    return data;
}

var data = genData();

Highcharts.stockChart('container', {
    chart: {
        events: {
            render: function() {
                var ticks = this.xAxis[1].ticks,
                    x = this.plotLeft,
                    y = 378,
                    width,
                    color = 'blue',
                    textColor = 'yellow',
                    height = 28;

                if (!this.customTicks) {
                    this.customTicks = [];
                } else {
                    this.customTicks.forEach(function(cTick) {
                        cTick.destroy();
                    });
                    this.customTicks.length = 0;
                }

                Highcharts.objectEach(ticks, function(tick) {
                    if (tick.mark) {

                        width = tick.mark.getBBox().x - x;
                        tick.label.element.children[0].setAttribute('fill', textColor);
                        tick.label.attr({
                            translateX: -width / 2
                        });

                        this.customTicks.push(
                            this.renderer.rect(
                                x,
                                y,
                                width,
                                height
                            ).attr({
                                fill: color
                            }).add()
                        )

                        x = tick.mark.getBBox().x;
                        if (color === 'blue') {
                            color = 'gray';
                            textColor = 'white';
                        } else {
                            color = 'blue';
                            textColor = 'yellow';
        ...