# Clinical reference bands (Trellis example)

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

Lab values over 14 days; each panel shades its own normal range with scoped annotations.

- Chart type: `line` (Line)
- Collection: Trellis · Trellis
- Raw configuration: https://westcoast-charts.com/gallery-src/trellis/clinical-reference-bands.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/trellis/clinical-reference-bands.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: "Value",
      test: "Glucose",
      data: [87.26, 81.45, 72.37, 99.79, 90.85, 106.64, 74.77, 117.08, 120.52, 89.27, 72.83, 96.95, 76.6, 94.65]
    },
    {
      name: "Value",
      test: "Sodium",
      data: [142.04, 138.19, 140.24, 137.77, 136.52, 139.8, 140.22, 135.76, 137.43, 140.87, 131.44, 140.14, 140.9, 139.5]
    },
    {
      name: "Value",
      test: "Potassium",
      data: [4.3, 5.04, 3.86, 4.79, 4.55, 4.35, 4.59, 4.34, 4.39, 4.37, 4.23, 3.53, 4.39, 4.33]
    },
    {
      name: "Value",
      test: "Creatinine",
      data: [1.44, 0.74, 1.16, 1.04, 1.04, 1.26, 1.03, 1.26, 1.24, 0.89, 0.99, 1.04, 1.25, 0.8]
    }
  ],
  annotations: {
    yaxis: [
      {
        scope: "Glucose",
        y: 70,
        y2: 100,
        fillColor: "#16a34a",
        opacity: 0.1,
        label: {
          text: "normal",
          position: "left",
          textAnchor: "start"
        }
      },
      {
        scope: "Sodium",
        y: 135,
        y2: 145,
        fillColor: "#16a34a",
        opacity: 0.1,
        label: {
          text: "normal",
          position: "left",
          textAnchor: "start"
        }
      },
      {
        scope: "Potassium",
        y: 3.5,
        y2: 5,
        fillColor: "#16a34a",
        opacity: 0.1,
        label: {
          text: "normal",
          position: "left",
          textAnchor: "start"
        }
      },
      {
        scope: "Creatinine",
        y: 0.6,
        y2: 1.2,
        fillColor: "#16a34a",
        opacity: 0.1,
        label: {
          text: "normal",
          position: "left",
          textAnchor: "start"
        }
      }
    ]
  },
  markers: {
    size: 3
  },
  xaxis: {
    categories: ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10", "D11", "D12", "D13", "D14"],
    tickAmount: 7
  },
  stroke: {
    width: 2
  },
  trellis: {
    by: "test",
    columns: 2,
    aspectRatio: 2,
    scales: {
      y: "independent"
    },
    legend: "none"
  },
  title: {
    text: "Lab values, patient 0417"
  },
  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-clinical-reference-bands.json --out trellis-clinical-reference-bands.svg --with-table` (save the options above as JSON first)