var options = {
  series: [
    {
      name: 'Setpoint',
      data: [16, 16, 18, 21, 21, 19, 19, 22, 22, 18, 16],
    },
  ],
  chart: {
    type: 'line',
    height: 350,
  },
  stroke: {
    curve: 'stepline',
  },
  dataLabels: {
    enabled: false,
  },
  title: {
    text: 'Thermostat Setpoint',
    align: 'left',
  },
  subtitle: {
    text: "curve: 'stepline' holds each value until the next point",
    align: 'left',
  },
  xaxis: {
    categories: [
      '00:00',
      '02:00',
      '04:00',
      '06:00',
      '08:00',
      '10:00',
      '12:00',
      '14:00',
      '16:00',
      '18:00',
      '20:00',
    ],
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return val + '°C'
      },
    },
  },
  markers: {
    hover: {
      sizeOffset: 4,
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()