Threshold-band rings on a radialColumn (V1)
The "bands" layer on a plain radialColumn: two rings with unit and per-slot aggregation (lowest SpO₂, highest respiratory rate) in tooltip, description and table.
Open the chart without page chrome ↗
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
"chart": {
"type": "radialColumn",
"height": 500
},
"series": [
{
"name": "HR /min · Median",
"data": [
{
"x": "15:00",
"y": 79
},
{
"x": "16:00",
"y": 78
},
{
"x": "17:00",
"y": 83
},
{
"x": "18:00",
"y": 83
},
{
"x": "19:00",
"y": 89
},
{
"x": "20:00",
"y": 88
},
{
"x": "21:00",
"y": 88
},
{
"x": "22:00",
"y": 85
},
{
"x": "23:00",
"y": 84
},
{
"x": "00:00",
"y": 84
},
{
"x": "01:00",
"y": 79
},
{
"x": "02:00",
"y": 105
},
{
"x": "03:00",
"y": 106
},
{
"x": "04:00",
"y": 102
},
{
"x": "05:00",
"y": 72
},
{
"x": "06:00",
"y": 71
},
{
"x": "07:00",
"y": 67
},
{
"x": "08:00",
"y": 69
},
{
"x": "09:00",
"y": 68
},
{
"x": "10:00",
"y": 71
},
{
"x": "11:00",
"y": 73
},
{
"x": "12:00",
"y": 77
},
{
"x": "13:00",
"y": 78
},
{
"x": "14:00",
"y": 78
}
]
}
],
"xaxis": {
"categories": [
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00"
]
},
"plotOptions": {
"radialColumn": {
"valueAxis": {
"min": 30,
"max": 150
},
"center": {
"value": "14:20",
"label": "now"
},
"categoryLabels": {
"formatter": function (c, x) { return x.index % 3 === 0 ? c : '' }
},
"layers": [
{
"type": "bands",
"name": "Breathing & saturation",
"gap": 15,
"upto": 23,
"labels": [
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00"
],
"endLabel": "15:00",
"rows": [
{
"name": "SpO₂",
"unit": "%",
"aggregate": "min",
"bands": [
{
"to": 88,
"level": 3,
"label": "< 88"
},
{
"to": 92,
"level": 2,
"label": "88–91"
},
{
"to": 95,
"level": 1,
"label": "92–94"
},
{
"level": 0,
"label": "≥ 95"
}
],
"data": [
97,
96,
97,
null,
97,
96,
96,
95,
null,
96,
96,
89,
89,
null,
96,
97,
96,
96,
null,
97,
96,
96,
95,
null
]
},
{
"name": "RR",
"unit": "/min",
"aggregate": "max",
"bands": [
{
"to": 9,
"level": 3,
"label": "< 9"
},
{
"to": 12,
"level": 1,
"label": "9–11"
},
{
"to": 21,
"level": 0,
"label": "12–20"
},
{
"to": 25,
"level": 2,
"label": "21–24"
},
{
"level": 3,
"label": "≥ 25"
}
],
"data": [
15,
null,
null,
15,
null,
null,
16,
null,
null,
15,
null,
null,
23,
null,
null,
15,
null,
null,
15,
null,
null,
16,
null,
null
]
}
]
}
]
}
}
}import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'
import vitals from 'west-coast-charts/layers/vitals'
import schedule from 'west-coast-charts/layers/schedule'
WestCoastCharts.use(types).use(premium).use(vitals).use(schedule)
const WestCoastChartsPremium = premium
const WestCoastChartsLayer_vitals = vitals
const WestCoastChartsLayer_schedule = schedule
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 500
},
"series": [
{
"name": "HR /min · Median",
"data": [
{
"x": "15:00",
"y": 79
},
{
"x": "16:00",
"y": 78
},
{
"x": "17:00",
"y": 83
},
{
"x": "18:00",
"y": 83
},
{
"x": "19:00",
"y": 89
},
{
"x": "20:00",
"y": 88
},
{
"x": "21:00",
"y": 88
},
{
"x": "22:00",
"y": 85
},
{
"x": "23:00",
"y": 84
},
{
"x": "00:00",
"y": 84
},
{
"x": "01:00",
"y": 79
},
{
"x": "02:00",
"y": 105
},
{
"x": "03:00",
"y": 106
},
{
"x": "04:00",
"y": 102
},
{
"x": "05:00",
"y": 72
},
{
"x": "06:00",
"y": 71
},
{
"x": "07:00",
"y": 67
},
{
"x": "08:00",
"y": 69
},
{
"x": "09:00",
"y": 68
},
{
"x": "10:00",
"y": 71
},
{
"x": "11:00",
"y": 73
},
{
"x": "12:00",
"y": 77
},
{
"x": "13:00",
"y": 78
},
{
"x": "14:00",
"y": 78
}
]
}
],
"xaxis": {
"categories": [
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00"
]
},
"plotOptions": {
"radialColumn": {
"valueAxis": {
"min": 30,
"max": 150
},
"center": {
"value": "14:20",
"label": "now"
},
"categoryLabels": {
"formatter": function (c, x) { return x.index % 3 === 0 ? c : '' }
},
"layers": [
{
"type": "bands",
"name": "Breathing & saturation",
"gap": 15,
"upto": 23,
"labels": [
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00"
],
"endLabel": "15:00",
"rows": [
{
"name": "SpO₂",
"unit": "%",
"aggregate": "min",
"bands": [
{
"to": 88,
"level": 3,
"label": "< 88"
},
{
"to": 92,
"level": 2,
"label": "88–91"
},
{
"to": 95,
"level": 1,
"label": "92–94"
},
{
"level": 0,
"label": "≥ 95"
}
],
"data": [
97,
96,
97,
null,
97,
96,
96,
95,
null,
96,
96,
89,
89,
null,
96,
97,
96,
96,
null,
97,
96,
96,
95,
null
]
},
{
"name": "RR",
"unit": "/min",
"aggregate": "max",
"bands": [
{
"to": 9,
"level": 3,
"label": "< 9"
},
{
"to": 12,
"level": 1,
"label": "9–11"
},
{
"to": 21,
"level": 0,
"label": "12–20"
},
{
"to": 25,
"level": 2,
"label": "21–24"
},
{
"level": 3,
"label": "≥ 25"
}
],
"data": [
15,
null,
null,
15,
null,
null,
16,
null,
null,
15,
null,
null,
23,
null,
null,
15,
null,
null,
15,
null,
null,
16,
null,
null
]
}
]
}
]
}
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export medical-vitals-bands.json --out medical-vitals-bands.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/medical/vitals-bands/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?