Highcharts test tool

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></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: {
    type: 'line',
    events: {
      load: function() {
        let chart = this,
          yAxis = chart.yAxis[0],
          gradient = {
            linearGradient: {
              x1: 0,
              y1: 1,
              x2: 0,
              y2: 0
            },
            stops: [
              [0, 'yellow'],
              [(chart.plotHeight - yAxis.toPixels(150, true)) / chart.plotHeight, 'yellow'],
              [(chart.plotHeight - yAxis.toPixels(250, true)) / chart.plotHeight, 'green'],
              [1, 'green']
            ]
          };

        chart.update({
          chart: {
            plotBackgroundColor: gradient
          }
        });
      }
    }
  },
  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
  }]
});