Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container"></div>

<table id="datatable">
    <thead>
        <tr>
            <th>Date</th>
            <th>Height of Tide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2022-07-15T13:56:58.5526746+03:00</th>
            <td>9.4</td>
        </tr>
        <tr>
            <th>2022-07-15T13:59:58.5526746+03:00</th>
            <td>0.5</td>
        </tr>
        <tr>
            <th>2022-07-15T14:56:58.5526746+03:00</th>
            <td>2.6</td>
        </tr>
        <tr>
            <th>2022-07-15T14:59:58.5526746+03:00</th>
            <td>1.0</td>
        </tr>
        <tr>
            <th>2022-07-15T15:06:58.5526746+03:00</th>
            <td>9.7</td>
        </tr>
        <tr>
            <th>2022-07-15T15:56:38.5526746+03:00</th>
            <td>0.1</td>
        </tr>
        <tr>
            <th>2022-07-15T15:58:58.5526746+03:00</th>
            <td>8.8</td>
        </tr>
        <tr>
            <th>2022-07-15T21:38:58.5526746+03:00</th>
            <td>0.6</td>
        </tr>
        <tr>
            <th>2022-07-15T00:56:58.5526746+03:00</th>
            <td>10.1</td>
        </tr>
        <tr>
            <th>2022-07-15T01:56:58.5526746+03:00</th>
            <td>-0.4</td>
        </tr>
        <tr>
            <th>2022-07-15T13:56:58.5526746+03:00</th>
            <td>9.4</td>
        </tr>
        
        <tr>
            <th>2022-07-15T13:56:58.5526746+03:00</th>
            <td>2.6</td>
        </tr>
        <tr>
            <th>2022-07-15T13:59:58.5526746+03:00</th>
            <td>3.6</td>
        </tr>
        <tr>
            <th>2022-07-15T14:56:58.5526746+03:00</th>
            <td>10.8</td>
        </tr>
        <tr>
            <th>2022-07-15T14:59:58.5526746+03:00</th>
            <td>10.8</td>
        </tr>
        <tr>
           ...

JavaScript

Highcharts.chart('container', {
    data: {
        table: document.getElementById('datatable'),
        startRow: 0,
        endRow: 20
    },
    chart: {
        type: 'line',
           zoomType: 'x',
    },
    xAxis: {
        type: 'category',
        labels: {
                    rotation: 270
                },
    },   
    yAxis: { 
        gridLineColor: '#197F07',
        gridLineWidth: 0,
        lineWidth: 1,  
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' +
                this.point.y + ' ft.<br>' + this.point.name;
        }
    }
});