Metrics by unit

import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import trellis from 'west-coast-charts/features/trellis'

WestCoastCharts.use(types).use(trellis)

const options = {
  chart: {
    height: "auto",
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "line",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Temperature",
      metric: "Temperature",
      data: [21.4, 20.5, 19.9, 21.7, 21.5, 22, 22.5, 19.9, 21.3, 20.3, 21.1, 20.1, 20.9, 21.6, 20.1, 21.2, 21.9, 19.8, 22.7, 23.2, 21.1, 19.2, 20.2, 21.9]
    },
    {
      name: "Humidity",
      metric: "Humidity",
      data: [41.8, 39.7, 49.3, 49.3, 48.9, 48, 47.2, 51, 51.2, 47.2, 45.3, 51.5, 47.6, 49.1, 46.4, 50.1, 53.5, 45.1, 47.6, 53, 46.2, 53.8, 47.7, 46.8]
    },
    {
      name: "CO₂",
      metric: "CO₂",
      data: [669.8, 659.5, 666.5, 589.6, 670.8, 689.8, 576.5, 624.2, 591.2, 563.9, 645.7, 704.5, 707.5, 602.4, 607.8, 629, 570.9, 669.3, 670.6, 701, 659.3, 616.1, 572.2, 705.9]
    },
    {
      name: "Noise",
      metric: "Noise",
      data: [43.2, 38.3, 43.8, 37.2, 42.9, 35.3, 37, 45.7, 40.6, 43.3, 50.7, 46.2, 48.2, 48.7, 36.6, 35.4, 48.8, 41.6, 41.6, 41.9, 46.1, 25.2, 40.8, 39.4]
    },
    {
      name: "Light",
      metric: "Light",
      data: [401.7, 371, 314.7, 339, 430.6, 347.5, 335.8, 416.4, 390.2, 390.8, 325, 405.9, 371.5, 354.7, 306, 336.3, 356.5, 348.5, 337.6, 380.8, 385.4, 400.8, 347.4, 461.4]
    },
    {
      name: "Pressure",
      metric: "Pressure",
      data: [1007.6, 1017.6, 1014.6, 1013.9, 1014.2, 1004.5, 1009.7, 1016.1, 1004.8, 1016.4, 1012.3, 1017.2, 1011, 1010.9, 1014.2, 1008.3, 1008.2, 1019.1, 1010.5, 1014.9, 1012.8, 1017.1, 1015.3, 1015.6]
    }
  ],
  xaxis: {
    categories: ["0h", "1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h", "22h", "23h"],
    tickAmount: 6
  },
  stroke: {
    width: 2,
    curve: "smooth"
  },
  trellis: {
    by: "metric",
    columns: 3,
    aspectRatio: 1.8,
    scales: {
      y: "independent"
    },
    legend: "none",
    panel: (k) => ({ yaxis: { labels: { formatter: (v) => Math.round(v) + ' ' + ({'Temperature':'°C','Humidity':'%','CO₂':'ppm','Noise':'dB','Light':'lx','Pressure':'hPa'})[k] } } })
  },
  title: {
    text: "Office sensors, last 24 h"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()