Utilization per day, 4 weeks (calendar)
Daily values from schedule.utilization() with day buckets; weekends closed: hatched, own legend entry, tooltip “closed”.
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": "calendar",
"height": 340
},
"series": [
{
"name": "Utilization %",
"data": [
{
"x": "2026-10-26",
"y": 42
},
{
"x": "2026-10-27",
"y": 40
},
{
"x": "2026-10-28",
"y": 41
},
{
"x": "2026-10-29",
"y": 40
},
{
"x": "2026-10-30",
"y": 39
},
{
"x": "2026-11-02",
"y": 32
},
{
"x": "2026-11-03",
"y": 29
},
{
"x": "2026-11-04",
"y": 31
},
{
"x": "2026-11-05",
"y": 31
},
{
"x": "2026-11-06",
"y": 29
},
{
"x": "2026-11-09",
"y": 33
},
{
"x": "2026-11-10",
"y": 32
},
{
"x": "2026-11-11",
"y": 33
},
{
"x": "2026-11-12",
"y": 32
},
{
"x": "2026-11-13",
"y": 32
},
{
"x": "2026-11-16",
"y": 35
},
{
"x": "2026-11-17",
"y": 33
},
{
"x": "2026-11-18",
"y": 34
},
{
"x": "2026-11-19",
"y": 33
},
{
"x": "2026-11-20",
"y": 32
}
]
}
],
"plotOptions": {
"calendar": {
"start": "2026-10-26",
"end": "2026-11-22"
},
"heatmap": {
"colorScale": {
"ranges": [
{
"from": 0,
"to": 49.9,
"color": "#bfdbfe",
"name": "< 50 %"
},
{
"from": 50,
"to": 79.9,
"color": "#60a5fa",
"name": "50–80 %"
},
{
"from": 80,
"to": 94.9,
"color": "#2563eb",
"name": "80–95 %"
},
{
"from": 95,
"to": 100,
"color": "#1e3a8a",
"name": "≥ 95 %"
}
]
},
"empty": {
"label": "closed"
}
}
},
"legend": {
"show": true,
"position": "bottom"
}
}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": "calendar",
"height": 340
},
"series": [
{
"name": "Utilization %",
"data": [
{
"x": "2026-10-26",
"y": 42
},
{
"x": "2026-10-27",
"y": 40
},
{
"x": "2026-10-28",
"y": 41
},
{
"x": "2026-10-29",
"y": 40
},
{
"x": "2026-10-30",
"y": 39
},
{
"x": "2026-11-02",
"y": 32
},
{
"x": "2026-11-03",
"y": 29
},
{
"x": "2026-11-04",
"y": 31
},
{
"x": "2026-11-05",
"y": 31
},
{
"x": "2026-11-06",
"y": 29
},
{
"x": "2026-11-09",
"y": 33
},
{
"x": "2026-11-10",
"y": 32
},
{
"x": "2026-11-11",
"y": 33
},
{
"x": "2026-11-12",
"y": 32
},
{
"x": "2026-11-13",
"y": 32
},
{
"x": "2026-11-16",
"y": 35
},
{
"x": "2026-11-17",
"y": 33
},
{
"x": "2026-11-18",
"y": 34
},
{
"x": "2026-11-19",
"y": 33
},
{
"x": "2026-11-20",
"y": 32
}
]
}
],
"plotOptions": {
"calendar": {
"start": "2026-10-26",
"end": "2026-11-22"
},
"heatmap": {
"colorScale": {
"ranges": [
{
"from": 0,
"to": 49.9,
"color": "#bfdbfe",
"name": "< 50 %"
},
{
"from": 50,
"to": 79.9,
"color": "#60a5fa",
"name": "50–80 %"
},
{
"from": 80,
"to": 94.9,
"color": "#2563eb",
"name": "80–95 %"
},
{
"from": 95,
"to": 100,
"color": "#1e3a8a",
"name": "≥ 95 %"
}
]
},
"empty": {
"label": "closed"
}
}
},
"legend": {
"show": true,
"position": "bottom"
}
}
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-util-calendar.json --out medical-util-calendar.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/util-calendar/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?