JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Logarithmic axis with yAxis time in seconds'
    },

    xAxis: {
        tickInterval: 1
    },

    yAxis: {
        type: 'logarithmic',
        minorTickInterval: 1,
        labels:{
        		formatter: function(){
            		var date = new Date(null);
                date.setSeconds(this.value);
                var result = date.toISOString().substr(11, 8); // To keep only hours:minutes:seconds
            		return result;
            }
        }
    },

    tooltip: {
        headerFormat: '<b>{series.name}</b><br />',
        pointFormat: 'x = {point.x}, y = {point.y}'
    },

    series: [{
        data: [12, 30, 240, 3600, 9500, 12800, 250060, 1051200],
        pointStart: 1
    }]
});