Highcharts Demo

author(s): Torstein Hønsi

by Black Label

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

const formatTime = time => time > 9 ? time : '0' + time;

Highcharts.chart('container', {
  data: {
    table: document.getElementById('datatable'),
    startRow: 0,
    endRow: 20
  },
  chart: {
    type: 'line',
    zoomType: 'x',
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: 270,
      formatter: function() {
        const date = new Date(this.value);

        if (this.chart.resetZoomButton) {
          return formatTime(date.getMinutes()) + ':' + formatTime(date.getSeconds());
        }

        return formatTime(date.getHours()) + ':' + formatTime(date.getMinutes());
      }
    },
  },
  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;
    }
  }
});