Highcharts test tool

by Black Label

HTML

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

JavaScript

var temperatures = [
  [Date.UTC(2024, 8, 1), 20],
  [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]
];

var chart = Highcharts.chart('container', {
  chart: {
    events: {
      render() {
        let chart = this,
          imageSize = 64
        if (!chart.myImage) {
          chart.myImage = chart.renderer.image('https://cdn-icons-png.flaticon.com/64/8445/8445275.png', chart.xAxis[0].toPixels(Date.UTC(2024, 8, 11)) - imageSize / 2,
            chart.yAxis[0].toPixels(200) - imageSize / 2,
            imageSize, imageSize
          ).add();
        }
        chart.myImage.attr({
          x: chart.xAxis[0].toPixels(Date.UTC(2024, 8, 11)) - imageSize / 2,
          y: chart.yAxis[0].toPixels(200) - imageSize / 2,
          zIndex: 100
        })
      }
    },
    type: 'line',
    plotBackgroundColor: {
      linearGradient: [0, 0, 0, 400],
      stops: [
        [0, 'green'],
        [1, '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
  }]
});