Patient flow: transitions with median / P90 (sankey)
The same visits as a sankey: width = patients; the tooltip shows the median and P90 duration per transition (sankeyPlugin from flow.fromEvents()).
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": "sankey",
"height": 380
},
"series": [
{
"name": "Patients",
"data": [
{
"from": "Check-in",
"to": "Room",
"value": 30
},
{
"from": "Room",
"to": "Exam",
"value": 19
},
{
"from": "Exam",
"to": "Checkout",
"value": 30
},
{
"from": "Room",
"to": "Lab",
"value": 11
},
{
"from": "Lab",
"to": "Exam",
"value": 11
}
]
}
],
"plotOptions": {
"sankey": {
"plugins": [
WestCoastChartsLayer_schedule.flow.fromEvents([
{
"patient": "P-8919",
"stages": {
"checkin": "2026-10-26T06:24:00.000Z",
"room": "2026-10-26T06:39:00.000Z",
"exam": "2026-10-26T06:42:00.000Z",
"checkout": "2026-10-26T07:11:00.000Z"
}
},
{
"patient": "P-7838",
"stages": {
"checkin": "2026-10-26T06:53:00.000Z",
"room": "2026-10-26T07:05:00.000Z",
"lab": "2026-10-26T07:12:00.000Z",
"exam": "2026-10-26T07:27:00.000Z",
"checkout": "2026-10-26T07:43:00.000Z"
}
},
{
"patient": "P-6757",
"stages": {
"checkin": "2026-10-26T07:26:00.000Z",
"room": "2026-10-26T07:38:00.000Z",
"exam": "2026-10-26T07:46:00.000Z",
"checkout": "2026-10-26T08:09:00.000Z"
}
},
{
"patient": "P-5676",
"stages": {
"checkin": "2026-10-26T07:48:00.000Z",
"room": "2026-10-26T08:09:00.000Z",
"lab": "2026-10-26T08:12:00.000Z",
"exam": "2026-10-26T08:27:00.000Z",
"checkout": "2026-10-26T08:40:00.000Z"
}
},
{
"patient": "P-4595",
"stages": {
"checkin": "2026-10-26T08:24:00.000Z",
"room": "2026-10-26T08:33:00.000Z",
"exam": "2026-10-26T08:38:00.000Z",
"checkout": "2026-10-26T09:02:00.000Z"
}
},
{
"patient": "P-3514",
"stages": {
"checkin": "2026-10-26T08:49:00.000Z",
"room": "2026-10-26T09:08:00.000Z",
"exam": "2026-10-26T09:13:00.000Z",
"checkout": "2026-10-26T09:34:00.000Z"
}
},
{
"patient": "P-2433",
"stages": {
"checkin": "2026-10-26T09:10:00.000Z",
"room": "2026-10-26T09:31:00.000Z",
"exam": "2026-10-26T09:40:00.000Z",
"checkout": "2026-10-26T10:02:00.000Z"
}
},
{
"patient": "P-1352",
"stages": {
"checkin": "2026-10-26T09:50:00.000Z",
"room": "2026-10-26T10:02:00.000Z",
"exam": "2026-10-26T10:09:00.000Z",
"checkout": "2026-10-26T10:32:00.000Z"
}
},
{
"patient": "P-9271",
"stages": {
"checkin": "2026-10-26T10:12:00.000Z",
"room": "2026-10-26T10:20:00.000Z",
"exam": "2026-10-26T10:29:00.000Z",
"checkout": "2026-10-26T11:02:00.000Z"
}
},
{
"patient": "P-8190",
"stages": {
"checkin": "2026-10-26T10:49:00.000Z",
"room": "2026-10-26T10:56:00.000Z",
"exam": "2026-10-26T11:07:00.000Z",
"checkout": "2026-10-26T11:22:00.000Z"
}
},
{
"patient": "P-8542",
"stages": {
"checkin": "2026-10-26T06:32:00.000Z",
"room": "2026-10-26T06:43:00.000Z",
"exam": "2026-10-26T06:47:00.000Z",
"checkout": "2026-10-26T07:12:00.000Z"
}
},
{
"patient": "P-7461",
"stages": {
"checkin": "2026-10-26T07:02:00.000Z",
"room": "2026-10-26T07:19:00.000Z",
"exam": "2026-10-26T07:22:00.000Z",
"checkout": "2026-10-26T07:56:00.000Z"
}
},
{
"patient": "P-6380",
"stages": {
"checkin": "2026-10-26T07:31:00.000Z",
"room": "2026-10-26T07:47:00.000Z",
"exam": "2026-10-26T07:56:00.000Z",
"checkout": "2026-10-26T08:25:00.000Z"
}
},
{
"patient": "P-5299",
"stages": {
"checkin": "2026-10-26T07:55:00.000Z",
"room": "2026-10-26T08:17:00.000Z",
"lab": "2026-10-26T08:22:00.000Z",
"exam": "2026-10-26T08:34:00.000Z",
"checkout": "2026-10-26T08:55:00.000Z"
}
},
{
"patient": "P-4218",
"stages": {
"checkin": "2026-10-26T08:53:00.000Z",
"room": "2026-10-26T09:01:00.000Z",
"lab": "2026-10-26T09:07:00.000Z",
"exam": "2026-10-26T09:17:00.000Z",
"checkout": "2026-10-26T09:39:00.000Z"
}
},
{
"patient": "P-3137",
"stages": {
"checkin": "2026-10-26T09:13:00.000Z",
"room": "2026-10-26T09:38:00.000Z",
"lab": "2026-10-26T09:42:00.000Z",
"exam": "2026-10-26T09:54:00.000Z",
"checkout": "2026-10-26T10:18:00.000Z"
}
},
{
"patient": "P-2056",
"stages": {
"checkin": "2026-10-26T09:59:00.000Z",
"room": "2026-10-26T10:11:00.000Z",
"lab": "2026-10-26T10:17:00.000Z",
"exam": "2026-10-26T10:32:00.000Z",
"checkout": "2026-10-26T10:50:00.000Z"
}
},
{
"patient": "P-9975",
"stages": {
"checkin": "2026-10-26T10:21:00.000Z",
"room": "2026-10-26T10:33:00.000Z",
"exam": "2026-10-26T10:37:00.000Z",
"checkout": "2026-10-26T11:05:00.000Z"
}
},
{
"patient": "P-8894",
"stages": {
"checkin": "2026-10-26T10:41:00.000Z",
"room": "2026-10-26T10:56:00.000Z",
"lab": "2026-10-26T11:02:00.000Z",
"exam": "2026-10-26T11:17:00.000Z",
"checkout": "2026-10-26T11:30:00.000Z"
}
},
{
"patient": "P-6003",
"stages": {
"checkin": "2026-10-26T06:34:00.000Z",
"room": "2026-10-26T06:49:00.000Z",
"exam": "2026-10-26T06:53:00.000Z",
"checkout": "2026-10-26T07:14:00.000Z"
}
},
{
"patient": "P-4922",
"stages": {
"checkin": "2026-10-26T07:00:00.000Z",
"room": "2026-10-26T07:12:00.000Z",
"lab": "2026-10-26T07:17:00.000Z",
"exam": "2026-10-26T07:29:00.000Z",
"checkout": "2026-10-26T07:47:00.000Z"
}
},
{
"patient": "P-3841",
"stages": {
"checkin": "2026-10-26T07:23:00.000Z",
"room": "2026-10-26T07:36:00.000Z",
"lab": "2026-10-26T07:42:00.000Z",
"exam": "2026-10-26T07:56:00.000Z",
"checkout": "2026-10-26T08:16:00.000Z"
}
},
{
"patient": "P-2760",
"stages": {
"checkin": "2026-10-26T08:01:00.000Z",
"room": "2026-10-26T08:08:00.000Z",
"exam": "2026-10-26T08:15:00.000Z",
"checkout": "2026-10-26T08:38:00.000Z"
}
},
{
"patient": "P-1679",
"stages": {
"checkin": "2026-10-26T08:11:00.000Z",
"room": "2026-10-26T08:31:00.000Z",
"exam": "2026-10-26T08:37:00.000Z",
"checkout": "2026-10-26T09:08:00.000Z"
}
},
{
"patient": "P-9598",
"stages": {
"checkin": "2026-10-26T08:54:00.000Z",
"room": "2026-10-26T09:01:00.000Z",
"exam": "2026-10-26T09:07:00.000Z",
"checkout": "2026-10-26T09:37:00.000Z"
}
},
{
"patient": "P-8517",
"stages": {
"checkin": "2026-10-26T09:12:00.000Z",
"room": "2026-10-26T09:26:00.000Z",
"exam": "2026-10-26T09:37:00.000Z",
"checkout": "2026-10-26T10:03:00.000Z"
}
},
{
"patient": "P-7436",
"stages": {
"checkin": "2026-10-26T09:49:00.000Z",
"room": "2026-10-26T10:04:00.000Z",
"exam": "2026-10-26T10:11:00.000Z",
"checkout": "2026-10-26T10:32:00.000Z"
}
},
{
"patient": "P-6355",
"stages": {
"checkin": "2026-10-26T10:12:00.000Z",
"room": "2026-10-26T10:29:00.000Z",
"lab": "2026-10-26T10:32:00.000Z",
"exam": "2026-10-26T10:46:00.000Z",
"checkout": "2026-10-26T11:03:00.000Z"
}
},
{
"patient": "P-5274",
"stages": {
"checkin": "2026-10-26T10:33:00.000Z",
"room": "2026-10-26T10:47:00.000Z",
"exam": "2026-10-26T10:55:00.000Z",
"checkout": "2026-10-26T11:23:00.000Z"
}
},
{
"patient": "P-3816",
"stages": {
"checkin": "2026-10-26T09:25:00.000Z",
"room": "2026-10-26T09:38:00.000Z",
"lab": "2026-10-26T09:42:00.000Z",
"exam": "2026-10-26T09:56:00.000Z",
"checkout": "2026-10-26T10:11:00.000Z"
}
}
], { timeZone: 'Europe/Berlin', locale: 'en' }).sankeyPlugin
]
}
}
}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": "sankey",
"height": 380
},
"series": [
{
"name": "Patients",
"data": [
{
"from": "Check-in",
"to": "Room",
"value": 30
},
{
"from": "Room",
"to": "Exam",
"value": 19
},
{
"from": "Exam",
"to": "Checkout",
"value": 30
},
{
"from": "Room",
"to": "Lab",
"value": 11
},
{
"from": "Lab",
"to": "Exam",
"value": 11
}
]
}
],
"plotOptions": {
"sankey": {
"plugins": [
WestCoastChartsLayer_schedule.flow.fromEvents([
{
"patient": "P-8919",
"stages": {
"checkin": "2026-10-26T06:24:00.000Z",
"room": "2026-10-26T06:39:00.000Z",
"exam": "2026-10-26T06:42:00.000Z",
"checkout": "2026-10-26T07:11:00.000Z"
}
},
{
"patient": "P-7838",
"stages": {
"checkin": "2026-10-26T06:53:00.000Z",
"room": "2026-10-26T07:05:00.000Z",
"lab": "2026-10-26T07:12:00.000Z",
"exam": "2026-10-26T07:27:00.000Z",
"checkout": "2026-10-26T07:43:00.000Z"
}
},
{
"patient": "P-6757",
"stages": {
"checkin": "2026-10-26T07:26:00.000Z",
"room": "2026-10-26T07:38:00.000Z",
"exam": "2026-10-26T07:46:00.000Z",
"checkout": "2026-10-26T08:09:00.000Z"
}
},
{
"patient": "P-5676",
"stages": {
"checkin": "2026-10-26T07:48:00.000Z",
"room": "2026-10-26T08:09:00.000Z",
"lab": "2026-10-26T08:12:00.000Z",
"exam": "2026-10-26T08:27:00.000Z",
"checkout": "2026-10-26T08:40:00.000Z"
}
},
{
"patient": "P-4595",
"stages": {
"checkin": "2026-10-26T08:24:00.000Z",
"room": "2026-10-26T08:33:00.000Z",
"exam": "2026-10-26T08:38:00.000Z",
"checkout": "2026-10-26T09:02:00.000Z"
}
},
{
"patient": "P-3514",
"stages": {
"checkin": "2026-10-26T08:49:00.000Z",
"room": "2026-10-26T09:08:00.000Z",
"exam": "2026-10-26T09:13:00.000Z",
"checkout": "2026-10-26T09:34:00.000Z"
}
},
{
"patient": "P-2433",
"stages": {
"checkin": "2026-10-26T09:10:00.000Z",
"room": "2026-10-26T09:31:00.000Z",
"exam": "2026-10-26T09:40:00.000Z",
"checkout": "2026-10-26T10:02:00.000Z"
}
},
{
"patient": "P-1352",
"stages": {
"checkin": "2026-10-26T09:50:00.000Z",
"room": "2026-10-26T10:02:00.000Z",
"exam": "2026-10-26T10:09:00.000Z",
"checkout": "2026-10-26T10:32:00.000Z"
}
},
{
"patient": "P-9271",
"stages": {
"checkin": "2026-10-26T10:12:00.000Z",
"room": "2026-10-26T10:20:00.000Z",
"exam": "2026-10-26T10:29:00.000Z",
"checkout": "2026-10-26T11:02:00.000Z"
}
},
{
"patient": "P-8190",
"stages": {
"checkin": "2026-10-26T10:49:00.000Z",
"room": "2026-10-26T10:56:00.000Z",
"exam": "2026-10-26T11:07:00.000Z",
"checkout": "2026-10-26T11:22:00.000Z"
}
},
{
"patient": "P-8542",
"stages": {
"checkin": "2026-10-26T06:32:00.000Z",
"room": "2026-10-26T06:43:00.000Z",
"exam": "2026-10-26T06:47:00.000Z",
"checkout": "2026-10-26T07:12:00.000Z"
}
},
{
"patient": "P-7461",
"stages": {
"checkin": "2026-10-26T07:02:00.000Z",
"room": "2026-10-26T07:19:00.000Z",
"exam": "2026-10-26T07:22:00.000Z",
"checkout": "2026-10-26T07:56:00.000Z"
}
},
{
"patient": "P-6380",
"stages": {
"checkin": "2026-10-26T07:31:00.000Z",
"room": "2026-10-26T07:47:00.000Z",
"exam": "2026-10-26T07:56:00.000Z",
"checkout": "2026-10-26T08:25:00.000Z"
}
},
{
"patient": "P-5299",
"stages": {
"checkin": "2026-10-26T07:55:00.000Z",
"room": "2026-10-26T08:17:00.000Z",
"lab": "2026-10-26T08:22:00.000Z",
"exam": "2026-10-26T08:34:00.000Z",
"checkout": "2026-10-26T08:55:00.000Z"
}
},
{
"patient": "P-4218",
"stages": {
"checkin": "2026-10-26T08:53:00.000Z",
"room": "2026-10-26T09:01:00.000Z",
"lab": "2026-10-26T09:07:00.000Z",
"exam": "2026-10-26T09:17:00.000Z",
"checkout": "2026-10-26T09:39:00.000Z"
}
},
{
"patient": "P-3137",
"stages": {
"checkin": "2026-10-26T09:13:00.000Z",
"room": "2026-10-26T09:38:00.000Z",
"lab": "2026-10-26T09:42:00.000Z",
"exam": "2026-10-26T09:54:00.000Z",
"checkout": "2026-10-26T10:18:00.000Z"
}
},
{
"patient": "P-2056",
"stages": {
"checkin": "2026-10-26T09:59:00.000Z",
"room": "2026-10-26T10:11:00.000Z",
"lab": "2026-10-26T10:17:00.000Z",
"exam": "2026-10-26T10:32:00.000Z",
"checkout": "2026-10-26T10:50:00.000Z"
}
},
{
"patient": "P-9975",
"stages": {
"checkin": "2026-10-26T10:21:00.000Z",
"room": "2026-10-26T10:33:00.000Z",
"exam": "2026-10-26T10:37:00.000Z",
"checkout": "2026-10-26T11:05:00.000Z"
}
},
{
"patient": "P-8894",
"stages": {
"checkin": "2026-10-26T10:41:00.000Z",
"room": "2026-10-26T10:56:00.000Z",
"lab": "2026-10-26T11:02:00.000Z",
"exam": "2026-10-26T11:17:00.000Z",
"checkout": "2026-10-26T11:30:00.000Z"
}
},
{
"patient": "P-6003",
"stages": {
"checkin": "2026-10-26T06:34:00.000Z",
"room": "2026-10-26T06:49:00.000Z",
"exam": "2026-10-26T06:53:00.000Z",
"checkout": "2026-10-26T07:14:00.000Z"
}
},
{
"patient": "P-4922",
"stages": {
"checkin": "2026-10-26T07:00:00.000Z",
"room": "2026-10-26T07:12:00.000Z",
"lab": "2026-10-26T07:17:00.000Z",
"exam": "2026-10-26T07:29:00.000Z",
"checkout": "2026-10-26T07:47:00.000Z"
}
},
{
"patient": "P-3841",
"stages": {
"checkin": "2026-10-26T07:23:00.000Z",
"room": "2026-10-26T07:36:00.000Z",
"lab": "2026-10-26T07:42:00.000Z",
"exam": "2026-10-26T07:56:00.000Z",
"checkout": "2026-10-26T08:16:00.000Z"
}
},
{
"patient": "P-2760",
"stages": {
"checkin": "2026-10-26T08:01:00.000Z",
"room": "2026-10-26T08:08:00.000Z",
"exam": "2026-10-26T08:15:00.000Z",
"checkout": "2026-10-26T08:38:00.000Z"
}
},
{
"patient": "P-1679",
"stages": {
"checkin": "2026-10-26T08:11:00.000Z",
"room": "2026-10-26T08:31:00.000Z",
"exam": "2026-10-26T08:37:00.000Z",
"checkout": "2026-10-26T09:08:00.000Z"
}
},
{
"patient": "P-9598",
"stages": {
"checkin": "2026-10-26T08:54:00.000Z",
"room": "2026-10-26T09:01:00.000Z",
"exam": "2026-10-26T09:07:00.000Z",
"checkout": "2026-10-26T09:37:00.000Z"
}
},
{
"patient": "P-8517",
"stages": {
"checkin": "2026-10-26T09:12:00.000Z",
"room": "2026-10-26T09:26:00.000Z",
"exam": "2026-10-26T09:37:00.000Z",
"checkout": "2026-10-26T10:03:00.000Z"
}
},
{
"patient": "P-7436",
"stages": {
"checkin": "2026-10-26T09:49:00.000Z",
"room": "2026-10-26T10:04:00.000Z",
"exam": "2026-10-26T10:11:00.000Z",
"checkout": "2026-10-26T10:32:00.000Z"
}
},
{
"patient": "P-6355",
"stages": {
"checkin": "2026-10-26T10:12:00.000Z",
"room": "2026-10-26T10:29:00.000Z",
"lab": "2026-10-26T10:32:00.000Z",
"exam": "2026-10-26T10:46:00.000Z",
"checkout": "2026-10-26T11:03:00.000Z"
}
},
{
"patient": "P-5274",
"stages": {
"checkin": "2026-10-26T10:33:00.000Z",
"room": "2026-10-26T10:47:00.000Z",
"exam": "2026-10-26T10:55:00.000Z",
"checkout": "2026-10-26T11:23:00.000Z"
}
},
{
"patient": "P-3816",
"stages": {
"checkin": "2026-10-26T09:25:00.000Z",
"room": "2026-10-26T09:38:00.000Z",
"lab": "2026-10-26T09:42:00.000Z",
"exam": "2026-10-26T09:56:00.000Z",
"checkout": "2026-10-26T10:11:00.000Z"
}
}
], { timeZone: 'Europe/Berlin', locale: 'en' }).sankeyPlugin
]
}
}
}
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-flow-sankey.json --out medical-flow-sankey.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/flow-sankey/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?