Time series, zoomable

author(s): Torstein Hønsi

by Yuriy Bablyukh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">

    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

const allData = [
    [
        1651842618338,
        51.93,
        126.59,
        90.26,
        120.52,
        154.81,
        227.25
    ],
    [
        1651842895737,
        54.36,
        485.93,
        80.95,
        106.26,
        141.83,
        186.9
    ],
    [
        1651843263803,
        55.6,
        179.17,
        71.06,
        85.88,
        122.22,
        151.12
    ],
    [
        1651843330090,
        52.93,
        484.65,
        75.09,
        101.83,
        170.44,
        192.49
    ],
    [
        1651843437204,
        55.15,
        374.14,
        73.5,
        95.58,
        140.89,
        188.4
    ],
    [
        1651843668629,
        55.2,
        252.49,
        76.15,
        93.28,
        157.86,
        175.11
    ],
    [
        1651844286628,
        54.16,
        200.15,
        70.9,
        86.49,
        118.29,
        166.56
    ],
    [
        1651845405251,
        57.41,
        719.66,
        92.66,
        106.68,
        149.4,
        189.46
    ],
    [
        1651845513456,
        56.32,
        343.04,
        90.41,
        104.27,
        159.59,
        196.45
    ],
    [
        1651845565334,
        57.6,
        201.54,
        73,
        89.26,
        131.08,
        149.16
    ],
    [
        1651846248488,
        56.8,
        224.02,
        73.4,
        90.66,
        143.7,
        154.81
    ],
    [
        1651847072483,
        56.01,
        223.42,
        70.73,
        89.34,
        138.48,
        156.33
    ],
    [
        1651847199345,
        55.32,
        321.54,
        78.13,
        97.11,
        151.94,
        195.53
    ],
    [
        1651847275700,
        53.69,
        255.25,
        72.14,
        92.46,
        131.94,
        162.83
    ],
    [
        1651847828260,
        54.87,
        352.2,
        75.96,
        97.84,
        154.95,
        176.73
    ],
    [
        1651848195481,
        58.08,
        395.14,
       ...