Highcharts test tool

by fujigoko

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',
    plotBackgroundColor: {
      linearGradient: [0, 300, 0, 0],
      stops: [
        [0, 'yellow'],
        [1, 'green']
      ]
    }
  },
  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
  }]
});