Highcharts test tool

by fujigoko

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
var temperatures = [
    [Date.UTC(2024, 8, 1), 20],  // September 1st
        [Date.UTC(2024, 8, 2), 39], 
        [Date.UTC(2024, 8, 3), 58], 
        [Date.UTC(2024, 8, 4), 78], 
        [Date.UTC(2024, 8, 5), 95], 
        [Date.UTC(2024, 8, 6), 110], 
        [Date.UTC(2024, 8, 7), 125], 
        [Date.UTC(2024, 8, 8), 142], 
        [Date.UTC(2024, 8, 9), 160], 
        [Date.UTC(2024, 8, 10), 180], 
        [Date.UTC(2024, 8, 11), 200],  
        [Date.UTC(2024, 8, 12), 219], 
        [Date.UTC(2024, 8, 13), 238], 
        [Date.UTC(2024, 8, 14), 258], 
        [Date.UTC(2024, 8, 15), 275], 
        [Date.UTC(2024, 8, 16), 290], 
        [Date.UTC(2024, 8, 17), 315], 
        [Date.UTC(2024, 8, 18), 332], 
        [Date.UTC(2024, 8, 19), 350], 
        [Date.UTC(2024, 8, 20), 370]
];

// Options for the chart
var options = {
    chart: {
        type: 'line',
        plotBackgroundColor: 'linear-gradient(to bottom, green, yellow)',
        plotBackgroundImage: null
    },
    title: {
        text: 'Temperature Line Chart'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%b %e'
        },
        min: Date.UTC(2024, 8, 1),
        max: Date.UTC(2024, 8, 20)
    },
    yAxis: {
        title: {
            text: 'Temperature'
        }
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        name: 'Temperature',
        data: temperatures
    }]
};

var chart = Highcharts.chart('container', options);

Highcharts.addEvent(Highcharts.Chart, 'render', function () {
    chart.renderer.image('https://cdn-icons-png.flaticon.com/64/8445/8445275.png',
        chart.plotLeft + chart.xAxis[0].toPixels(Date.UTC(2024, 8, 8)),
        chart.plotTop + chart.yAxis[0].toPixels(400),
        64, 64
    ).add().toFront();
});
});