# Metrics by unit (Trellis example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/trellis/metrics-by-unit/ · Index for agents: https://westcoast-charts.com/llms.txt

Six sensors with their own units: independent y scales and per-panel formatters.

- Chart type: `line` (Line)
- Collection: Trellis · Trellis
- Raw configuration: https://westcoast-charts.com/gallery-src/trellis/metrics-by-unit.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/trellis/metrics-by-unit.html

## Setup

```js
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)
```

## Options

```js
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()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export trellis-metrics-by-unit.json --out trellis-metrics-by-unit.svg --with-table` (save the options above as JSON first)