Clinical reference bands

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: "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()