Dense heatmap
A 60 × 100 matrix.
Why it matters the canvas renderer paints line, area and scatter series only; heatmap cells stay SVG (6 000 cells, animations off)
Open the chart without page chrome ↗
const options = {
chart: {
height: 460,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "heatmap",
animations: {
enabled: false
},
toolbar: {
show: false
}
},
series: [
{
name: "S1",
data: [
{
x: "1",
y: 52
},
{
x: "2",
y: 52
},
{
x: "3",
y: 54
},
{
x: "4",
y: 53
},
{
x: "5",
y: 53
},
{
x: "6",
y: 53
},
{
x: "7",
y: 53
},
{
x: "8",
y: 53
},
{
x: "9",
y: 54
},
{
x: "10",
y: 54
},
{
x: "11",
y: 51
},
{
x: "12",
y: 52
},
{
x: "13",
y: 55
},
{
x: "14",
y: 54
},
{
x: "15",
y: 53
},
{
x: "16",
y: 52
},
{
x: "17",
y: 54
},
{
x: "18",
y: 53
},
{
x: "19",
y: 53
},
{
x: "20",
y: 52
},
{
x: "21",
y: 55
},
{
x: "22",
y: 55
},
{
x: "23",
y: 54
},
{
x: "24",
y: 52
},
{
x: "25",
y: 51
},
{
x: "26",
y: 51
},
{
x: "27",
y: 53
},
{
x: "28",
y: 55
},
{
x: "29",
y: 51
},
{
x: "30",
y: 54
},
{
x: "31",
y: 53
},
{
x: "32",
y: 53
},
{
x: "33",
y: 51
},
{
x: "34",
y: 54
},
{
x: "35",
y: 54
},
{
x: "36",
y: 51
},
{
x: "37",
y: 54
},
{
x: "38",
y: 52
},
{
x: "39",
y: 55
},
{
x: "40",
y: 53
},
{
x: "41",
y: 54
},
{
x: "42",
y: 52
},
{
x: "43",
y: 53
},
{
x: "44",
y: 50
},
{
x: "45",
y: 55
},
{
x: "46",
y: 52
},
{
x: "47",
y: 54
},
{
x: "48",
y: 53
},
{
x: "49",
y: 53
},
{
x: "50",
y: 53
},
{
x: "51",
y: 50
},
{
x: "52",
y: 53
},
{
x: "53",
y: 53
},
{
x: "54",
y: 55
},
{
x: "55",
y: 54
},
{
x: "56",
y: 51
},
{
x: "57",
y: 54
},
{
x: "58",
y: 54
},
{
x: "59",
y: 54
},
{
x: "60",
y: 54
},
{
x: "61",
y: 54
},
{
x: "62",
y: 53
},
{
x: "63",
y: 54
},
{
x: "64",
y: 54
},
{
x: "65",
y: 52
},
{
x: "66",
y: 53
},
{
x: "67",
y: 50
},
{
x: "68",
y: 51
},
{
x: "69",
y: 54
},
{
x: "70",
y: 51
},
{
x: "71",
y: 52
},
{
x: "72",
y: 52
},
{
x: "73",
y: 53
},
{
x: "74",
y: 53
},
{
x: "75",
y: 50
},
{
x: "76",
y: 54
},
{
x: "77",
y: 50
},
{
x: "78",
y: 54
},
{
x: "79",
y: 51
},
{
x: "80",
y: 53
},
{
x: "81",
y: 55
},
{
x: "82",
y: 55
},
{
x: "83",
y: 54
},
{
x: "84",
y: 54
},
{
x: "85",
y: 54
},
{
x: "86",
y: 54
},
{
x: "87",
y: 53
},
{
x: "88",
y: 52
},
{
x: "89",
y: 54
},
{
x: "90",
y: 50
},
{
x: "91",
y: 54
},
{
x: "92",
y: 51
},
{
x: "93",
y: 52
},
{
x: "94",
y: 53
},
{
x: "95",
y: 53
},
{
x: "96",
y: 54
},
{
x: "97",
y: 55
},
{
x: "98",
y: 51
},
{
x: "99",
y: 52
},
{
x: "100",
y: 50
}
]
},
{
name: "S2",
data: [
{
x: "1",
y: 59
},
{
x: "2",
y: 59
},
{
x: "3",
y: 61
},
{
x: "4",
y: 57
},
{
x: "5",
y: 58
},
{
x: "6",
y: 61
},
{
x: "7",
y: 56
},
{
x: "8",
y: 57
},
{
x: "9",
y: 59
},
{
x: "10",
y: 57
},
{
x: "11",
y: 57
},
{
x: "12",
y: 57
},
{
x: "13",
y: 55
},
{
x: "14",
y: 51
},
{
x: "15",
y: 51
},
{
x: "16",
y: 51
},
{
x: "17",
y: 50
},
{
x: "18",
y: 51
},
{
x: "19",
y: 50
},
{
x: "20",
y: 47
},
{
x: "21",
y: 49
},
{
x: "22",
y: 49
},
{
x: "23",
y: 49
},
{
x: "24",
y: 46
},
{
x: "25",
y: 48
},
{
x: "26",
y: 44
},
{
x: "27",
y: 46
},
{
x: "28",
y: 45
},
{
x: "29",
y: 44
},
{
x: "30",
y: 45
},
{
x: "31",
y: 45
},
{
x: "32",
y: 44
},
{
x: "33",
y: 48
},
{
x: "34",
y: 48
},
{
x: "35",
y: 48
},
{
x: "36",
y: 48
},
{
x: "37",
y: 49
},
{
x: "38",
y: 50
},
{
x: "39",
y: 48
},
{
x: "40",
y: 49
},
{
x: "41",
y: 49
},
{
x: "42",
y: 50
},
{
x: "43",
y: 53
},
{
x: "44",
y: 53
},
{
x: "45",
y: 54
},
{
x: "46",
y: 53
},
{
x: "47",
y: 56
},
{
x: "48",
y: 54
},
{
x: "49",
y: 57
},
{
x: "50",
y: 59
},
{
x: "51",
y: 56
},
{
x: "52",
y: 56
},
{
x: "53",
y: 60
},
{
x: "54",
y: 60
},
{
x: "55",
y: 59
},
{
x: "56",
y: 62
},
{
x: "57",
y: 58
},
{
x: "58",
y: 60
},
{
x: "59",
y: 60
},
{
x: "60",
y: 58
},
{
x: "61",
y: 58
},
{
x: "62",
y: 59
},
{
x: "63",
y: 57
},
{
x: "64",
y: 57
},
{
x: "65",
y: 59
},
{
x: "66",
y: 57
},
{
x: "67",
y: 54
},
{
x: "68",
y: 54
},
{
x: "69",
y: 54
},
{
x: "70",
y: 54
},
{
x: "71",
y: 51
},
{
x: "72",
y: 54
},
{
x: "73",
y: 52
},
{
x: "74",
y: 51
},
{
x: "75",
y: 52
},
{
x: "76",
y: 49
},
{
x: "77",
y: 49
},
{
x: "78",
y: 46
},
{
x: "79",
y: 45
},
{
x: "80",
y: 48
},
{
x: "81",
y: 45
},
{
x: "82",
y: 47
},
{
x: "83",
y: 44
},
{
x: "84",
y: 43
},
{
x: "85",
y: 43
},
{
x: "86",
y: 47
},
{
x: "87",
y: 47
},
{
x: "88",
y: 46
},
{
x: "89",
y: 45
},
{
x: "90",
y: 43
},
{
x: "91",
y: 48
},
{
x: "92",
y: 45
},
{
x: "93",
y: 48
},
{
x: "94",
y: 49
},
{
x: "95",
y: 49
},
{
x: "96",
y: 51
},
{
x: "97",
y: 51
},
{
x: "98",
y: 52
},
{
x: "99",
y: 50
},
{
x: "100",
y: 51
}
]
},
{
name: "S3",
data: [
{
x: "1",
y: 69
},
{
x: "2",
y: 68
},
{
x: "3",
y: 67
},
{
x: "4",
y: 67
},
{
x: "5",
y: 67
},
{
x: "6",
y: 65
},
{
x: "7",
y: 62
},
{
x: "8",
y: 62
},
{
x: "9",
y: 63
},
{
x: "10",
y: 59
},
{
x: "11",
y: 58
},
{
x: "12",
y: 56
},
{
x: "13",
y: 54
},
{
x: "14",
y: 54
},
{
x: "15",
y: 52
},
{
x: "16",
y: 52
},
{
x: "17",
y: 52
},
{
x: "18",
y: 46
},
{
x: "19",
y: 46
},
{
x: "20",
y: 46
},
{
x: "21",
y: 44
},
{
x: "22",
y: 40
},
{
x: "23",
y: 39
},
{
x: "24",
y: 42
},
{
x: "25",
y: 40
},
{
x: "26",
y: 40
},
{
x: "27",
y: 39
},
{
x: "28",
y: 39
},
{
x: "29",
y: 39
},
{
x: "30",
y: 40
},
{
x: "31",
y: 36
},
{
x: "32",
y: 38
},
{
x: "33",
y: 41
},
{
x: "34",
y: 37
},
{
x: "35",
y: 41
},
{
x: "36",
y: 44
},
{
x: "37",
y: 42
},
{
x: "38",
y: 44
},
{
x: "39",
y: 44
},
{
x: "40",
y: 49
},
{
x: "41",
y: 47
},
{
x: "42",
y: 48
},
{
x: "43",
y: 52
},
{
x: "44",
y: 52
// ... truncated, use Copy or open the full config
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
const options = {
chart: {
height: 460,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "heatmap",
animations: {
enabled: false
},
toolbar: {
show: false
}
},
series: [
{
name: "S1",
data: [
{
x: "1",
y: 52
},
{
x: "2",
y: 52
},
{
x: "3",
y: 54
},
{
x: "4",
y: 53
},
{
x: "5",
y: 53
},
{
x: "6",
y: 53
},
{
x: "7",
y: 53
},
{
x: "8",
y: 53
},
{
x: "9",
y: 54
},
{
x: "10",
y: 54
},
{
x: "11",
y: 51
},
{
x: "12",
y: 52
},
{
x: "13",
y: 55
},
{
x: "14",
y: 54
},
{
x: "15",
y: 53
},
{
x: "16",
y: 52
},
{
x: "17",
y: 54
},
{
x: "18",
y: 53
},
{
x: "19",
y: 53
},
{
x: "20",
y: 52
},
{
x: "21",
y: 55
},
{
x: "22",
y: 55
},
{
x: "23",
y: 54
},
{
x: "24",
y: 52
},
{
x: "25",
y: 51
},
{
x: "26",
y: 51
},
{
x: "27",
y: 53
},
{
x: "28",
y: 55
},
{
x: "29",
y: 51
},
{
x: "30",
y: 54
},
{
x: "31",
y: 53
},
{
x: "32",
y: 53
},
{
x: "33",
y: 51
},
{
x: "34",
y: 54
},
{
x: "35",
y: 54
},
{
x: "36",
y: 51
},
{
x: "37",
y: 54
},
{
x: "38",
y: 52
},
{
x: "39",
y: 55
},
{
x: "40",
y: 53
},
{
x: "41",
y: 54
},
{
x: "42",
y: 52
},
{
x: "43",
y: 53
},
{
x: "44",
y: 50
},
{
x: "45",
y: 55
},
{
x: "46",
y: 52
},
{
x: "47",
y: 54
},
{
x: "48",
y: 53
},
{
x: "49",
y: 53
},
{
x: "50",
y: 53
},
{
x: "51",
y: 50
},
{
x: "52",
y: 53
},
{
x: "53",
y: 53
},
{
x: "54",
y: 55
},
{
x: "55",
y: 54
},
{
x: "56",
y: 51
},
{
x: "57",
y: 54
},
{
x: "58",
y: 54
},
{
x: "59",
y: 54
},
{
x: "60",
y: 54
},
{
x: "61",
y: 54
},
{
x: "62",
y: 53
},
{
x: "63",
y: 54
},
{
x: "64",
y: 54
},
{
x: "65",
y: 52
},
{
x: "66",
y: 53
},
{
x: "67",
y: 50
},
{
x: "68",
y: 51
},
{
x: "69",
y: 54
},
{
x: "70",
y: 51
},
{
x: "71",
y: 52
},
{
x: "72",
y: 52
},
{
x: "73",
y: 53
},
{
x: "74",
y: 53
},
{
x: "75",
y: 50
},
{
x: "76",
y: 54
},
{
x: "77",
y: 50
},
{
x: "78",
y: 54
},
{
x: "79",
y: 51
},
{
x: "80",
y: 53
},
{
x: "81",
y: 55
},
{
x: "82",
y: 55
},
{
x: "83",
y: 54
},
{
x: "84",
y: 54
},
{
x: "85",
y: 54
},
{
x: "86",
y: 54
},
{
x: "87",
y: 53
},
{
x: "88",
y: 52
},
{
x: "89",
y: 54
},
{
x: "90",
y: 50
},
{
x: "91",
y: 54
},
{
x: "92",
y: 51
},
{
x: "93",
y: 52
},
{
x: "94",
y: 53
},
{
x: "95",
y: 53
},
{
x: "96",
y: 54
},
{
x: "97",
y: 55
},
{
x: "98",
y: 51
},
{
x: "99",
y: 52
},
{
x: "100",
y: 50
}
]
},
{
name: "S2",
data: [
{
x: "1",
y: 59
},
{
x: "2",
y: 59
},
{
x: "3",
y: 61
},
{
x: "4",
y: 57
},
{
x: "5",
y: 58
},
{
x: "6",
y: 61
},
{
x: "7",
y: 56
},
{
x: "8",
y: 57
},
{
x: "9",
y: 59
},
{
x: "10",
y: 57
},
{
x: "11",
y: 57
},
{
x: "12",
y: 57
},
{
x: "13",
y: 55
},
{
x: "14",
y: 51
},
{
x: "15",
y: 51
},
{
x: "16",
y: 51
},
{
x: "17",
y: 50
},
{
x: "18",
y: 51
},
{
x: "19",
y: 50
},
{
x: "20",
y: 47
},
{
x: "21",
y: 49
},
{
x: "22",
y: 49
},
{
x: "23",
y: 49
},
{
x: "24",
y: 46
},
{
x: "25",
y: 48
},
{
x: "26",
y: 44
},
{
x: "27",
y: 46
},
{
x: "28",
y: 45
},
{
x: "29",
y: 44
},
{
x: "30",
y: 45
},
{
x: "31",
y: 45
},
{
x: "32",
y: 44
},
{
x: "33",
y: 48
},
{
x: "34",
y: 48
},
{
x: "35",
y: 48
},
{
x: "36",
y: 48
},
{
x: "37",
y: 49
},
{
x: "38",
y: 50
},
{
x: "39",
y: 48
},
{
x: "40",
y: 49
},
{
x: "41",
y: 49
},
{
x: "42",
y: 50
},
{
x: "43",
y: 53
},
{
x: "44",
y: 53
},
{
x: "45",
y: 54
},
{
x: "46",
y: 53
},
{
x: "47",
y: 56
},
{
x: "48",
y: 54
},
{
x: "49",
y: 57
},
{
x: "50",
y: 59
},
{
x: "51",
y: 56
},
{
x: "52",
y: 56
},
{
x: "53",
y: 60
},
{
x: "54",
y: 60
},
{
x: "55",
y: 59
},
{
x: "56",
y: 62
},
{
x: "57",
y: 58
},
{
x: "58",
y: 60
},
{
x: "59",
y: 60
},
{
x: "60",
y: 58
},
{
x: "61",
y: 58
},
{
x: "62",
y: 59
},
{
x: "63",
y: 57
},
{
x: "64",
y: 57
},
{
x: "65",
y: 59
},
{
x: "66",
y: 57
},
{
x: "67",
y: 54
},
{
x: "68",
y: 54
},
{
x: "69",
y: 54
},
{
x: "70",
y: 54
},
{
x: "71",
y: 51
},
{
x: "72",
y: 54
},
{
x: "73",
y: 52
},
{
x: "74",
y: 51
},
{
x: "75",
y: 52
},
{
x: "76",
y: 49
},
{
x: "77",
y: 49
},
{
x: "78",
y: 46
},
{
x: "79",
y: 45
},
{
x: "80",
y: 48
},
{
x: "81",
y: 45
},
{
x: "82",
y: 47
},
{
x: "83",
y: 44
},
{
x: "84",
y: 43
},
{
x: "85",
y: 43
},
{
x: "86",
y: 47
},
{
x: "87",
y: 47
},
{
x: "88",
y: 46
},
{
x: "89",
y: 45
},
{
x: "90",
y: 43
},
{
x: "91",
y: 48
},
{
x: "92",
y: 45
},
{
x: "93",
y: 48
},
{
x: "94",
y: 49
},
{
x: "95",
y: 49
},
{
x: "96",
y: 51
},
{
x: "97",
y: 51
},
{
x: "98",
y: 52
},
{
x: "99",
y: 50
},
{
x: "100",
y: 51
}
]
},
{
name: "S3",
data: [
{
x: "1",
y: 69
},
{
x: "2",
y: 68
},
{
x: "3",
y: 67
},
{
x: "4",
y: 67
},
{
x: "5",
y: 67
},
{
x: "6",
y: 65
},
{
x: "7",
y: 62
},
{
x: "8",
y: 62
},
{
x: "9",
y: 63
},
{
x: "10",
y: 59
},
{
x: "11",
y: 58
},
{
x: "12",
y: 56
},
{
x: "13",
y: 54
},
{
x: "14",
y: 54
},
{
x: "15",
y: 52
},
{
x: "16",
y: 52
},
{
x: "17",
y: 52
},
{
x: "18",
y: 46
},
{
x: "19",
y: 46
},
{
x: "20",
y: 46
},
{
x: "21",
y: 44
},
{
x: "22",
y: 40
},
{
x: "23",
y: 39
},
{
x: "24",
y: 42
},
{
x: "25",
y: 40
},
{
x: "26",
y: 40
},
{
x: "27",
y: 39
},
{
x: "28",
y: 39
},
{
x: "29",
y: 39
},
{
x: "30",
y: 40
},
{
x: "31",
y: 36
},
{
x: "32",
y: 38
},
{
x: "33",
y: 41
},
{
x: "34",
y: 37
},
{
x: "35",
y: 41
},
{
x: "36",
y: 44
},
{
x: "37",
y: 42
},
{
x: "38",
y: 44
},
{
x: "39",
y: 44
},
{
x: "40",
y: 49
},
{
x: "41",
y: 47
},
{
x: "42",
y: 48
},
{
x: "43",
y: 52
},
{
x: "44",
y: 52
// ... truncated, use Copy or open the full config
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 canvas-heatmap-canvas-renderer.json --out canvas-heatmap-canvas-renderer.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/canvas/heatmap-canvas-renderer/index.md …