@hedia/chart v1.7.0

Categorical Colors

10 colors ordered for maximum contrast between neighbors. Colors adapt to light/dark theme.

import { COLORS } from "@hedia/chart/theme";

COLORS.blue      // hsl(219, 85%, 62%)
COLORS.green     // hsl(123, 41%, 44%)
COLORS.red       // hsl(1, 74%, 54%)
COLORS.purple    // hsl(280, 60%, 60%)
COLORS.yellow    // hsl(49, 100%, 59%)
COLORS.teal      // hsl(173, 58%, 48%)
COLORS.pink      // hsl(330, 65%, 58%)
COLORS.amber     // hsl(37, 100%, 55%)
COLORS.sky       // hsl(217, 100%, 76%)
COLORS.orange    // hsl(16, 80%, 60%)

alpha(color, opacity)

Create transparent variants of any color.

import { alpha, COLORS } from "@hedia/chart/theme";

alpha(COLORS.blue, 1  )  // hsla(219, 85%, 62%, 1)
alpha(COLORS.blue, 0.9)  // hsla(219, 85%, 62%, 0.9)
alpha(COLORS.blue, 0.8)  // hsla(219, 85%, 62%, 0.8)
alpha(COLORS.blue, 0.7)  // hsla(219, 85%, 62%, 0.7)
alpha(COLORS.blue, 0.6)  // hsla(219, 85%, 62%, 0.6)
alpha(COLORS.blue, 0.5)  // hsla(219, 85%, 62%, 0.5)
alpha(COLORS.blue, 0.4)  // hsla(219, 85%, 62%, 0.4)
alpha(COLORS.blue, 0.3)  // hsla(219, 85%, 62%, 0.3)
alpha(COLORS.blue, 0.2)  // hsla(219, 85%, 62%, 0.2)
alpha(COLORS.blue, 0.1)  // hsla(219, 85%, 62%, 0.1)

Stacked bar

import { barChart } from "@hedia/chart/bar";

barChart({
  datasets: [
    { data: [80,65,50,35,20,10], label: "3.5.0" },
    { data: [120,150,180,160,140,130], label: "3.6.0" },
    { data: [0,0,40,90,150,200], label: "3.6.1" },
    { data: [0,0,0,0,30,80], label: "3.7.0" },
  ],
  labels: ["Jan","Feb","Mar","Apr","May","Jun"],
  legend: { boxWidth: 12 },
  stacked: true,
  title: "Bolus Calculations by Version",
});

Grouped bar

import { barChart } from "@hedia/chart/bar";
import { COLORS } from "@hedia/chart/theme";

barChart({
  datasets: [
    { backgroundColor: COLORS.green, data: [280,310,350,320,340,390], label: "iOS" },
    { backgroundColor: COLORS.blue, data: [150,170,190,180,200,220], label: "Android" },
  ],
  labels: ["Jan","Feb","Mar","Apr","May","Jun"],
  title: "Calculations by Platform",
});

Horizontal bar

import { barChart } from "@hedia/chart/bar";
import { COLORS } from "@hedia/chart/theme";

barChart({
  datasets: [
    {
      backgroundColor: [COLORS.blue, COLORS.green, COLORS.red, COLORS.purple, COLORS.yellow],
      data: [38,27,20,10,5],
      label: "Usage %",
    },
  ],
  indexAxis: "y",
  labels: ["Food Library","Quick Carbs","Manual Entry","Favourites","Barcode Scan"],
  legend: { display: false },
  title: "Carb Entry Methods",
  y: { callback: (v) => v + "%" },
});

Custom tooltip

Register named callbacks on globalThis.__chartTooltipCallbacks before chart-init.js runs. Reference them by name in the tooltip config.

// 1. Register the callback globally (before chart-init.js)
globalThis.__chartTooltipCallbacks = {
  __TIMELINE_TOOLTIP__: function (context) {
    const events = context.dataset._events;
    if (!events) return context.dataset.label + ": " + context.parsed.y;
    const items = events[context.dataIndex];
    if (!items || items.length === 0) return null;
    return items.map(function (e) { return e.type + " (" + e.time + ")"; });
  },
};

// 2. Use the callback name in the chart config
import { barChart } from "@hedia/chart/bar";

const config = barChart({
  datasets: [{ data: [4, 7, 3, 9, 5, 2], label: "Events" }],
  labels: ["Jan","Feb","Mar","Apr","May","Jun"],
  legend: { display: false },
  title: "Daily Events",
  tooltip: { callbacks: { label: "__TIMELINE_TOOLTIP__" } },
  x: { maxRotation: 0, minRotation: 0 },
  y: { stepSize: 1, title: "Event count" },
});

// 3. Attach per-bar event details for the tooltip
config.data.datasets[0]._events = [
  [{ time: "08:12", type: "calcflow.start" }, { time: "12:45", type: "home.view" }],
  // ... one array per bar
];

Click handler

Register named callbacks on globalThis.__chartClickCallbacks before chart-init.js runs. The callback receives the Chart.js event, elements, and chart arguments. Store pre-computed URLs in a data-hrefs attribute on the canvas — the handler looks up the URL by bar index.

// 1. Register the click callback globally (before chart-init.js)
globalThis.__chartClickCallbacks = {
  __NAVIGATE_ON_CLICK__: function (_event, elements, chart) {
    if (elements.length === 0) return;
    const index = elements[0].index;
    const hrefs = chart.canvas.dataset.hrefs;
    if (!hrefs) return;
    const urls = JSON.parse(hrefs);
    if (urls[index]) globalThis.location.href = urls[index];
  },
};

// 2. Use the callback name in the chart config
import { barChart } from "@hedia/chart/bar";

const config = barChart({
  datasets: [{ data: [163, 142, 141], label: "Logs" }],
  labels: ["id-hedia-com", "oauth2-hedia-com", "developer-hedia-dev"],
  legend: { display: false },
  title: "Logs by Source",
  onClick: { handler: "__NAVIGATE_ON_CLICK__" },
});

// 3. Add pre-computed URLs as a data attribute on the canvas
canvas({
  "data-chart-config": JSON.stringify(config),
  "data-hrefs": JSON.stringify([
    "/logs?source=id-hedia-com",
    "/logs?source=oauth2-hedia-com",
    "/logs?source=developer-hedia-dev",
  ]),
});

Overlapping bar

Two datasets rendered at the same position — foreground on top of background. Ideal for comparing current vs previous period.

import { overlappingBarChart } from "@hedia/chart/bar";
import { alpha, COLORS } from "@hedia/chart/theme";

overlappingBarChart({
  labels: [
    "00", "01", "02", "03", "04", "05", "06", "07",
    "08", "09", "10", "11", "12", "13", "14", "15",
    "16", "17", "18", "19", "20", "21", "22", "23",
  ],
  background: {
    label: "Yesterday",
    data: [3,1,10,12,13,12,15,12,18,14,9,7,11,16,6,5,7,10,15,12,8,5,3,2],
    backgroundColor: alpha(COLORS.red, 0.3),
  },
  foreground: {
    label: "Today",
    data: [2,11,10,9,4,3,7,15,22,17,11,8,14],
    backgroundColor: COLORS.red,
  },
  legend: { boxWidth: 12 },
  title: "Errors: Today vs Yesterday",
});

Area line

import { lineChart } from "@hedia/chart/line";

lineChart({
  datasets: [
    {
      data: [320,410,380,520,490,610],
      fill: true,
      label: "Daily Active Users",
    },
  ],
  labels: ["Jan","Feb","Mar","Apr","May","Jun"],
  legend: { display: false },
  title: "Daily Active Users",
});

Multi-line

import { lineChart } from "@hedia/chart/line";
import { alpha, COLORS } from "@hedia/chart/theme";

lineChart({
  datasets: [
    {
      backgroundColor: alpha(COLORS.red, 0.2),
      borderColor: COLORS.red,
      data: [12,18,9,24,15,8],
      fill: true,
      label: "Errors",
      pointHoverRadius: 6,
      pointRadius: 4,
      tension: 0.5,
    },
    {
      backgroundColor: "transparent",
      borderColor: COLORS.amber,
      borderDash: [5, 3],
      data: [8,12,6,16,10,5],
      label: "Affected users",
      tension: 0,
    },
  ],
  labels: ["Jan","Feb","Mar","Apr","May","Jun"],
  legend: { boxWidth: 12 },
  title: "Error Trend",
});

Carb entry methods

import { doughnutChart } from "@hedia/chart/doughnut";

doughnutChart({
  datasets: [
    {
      data: [40, 30, 20, 10],
    },
  ],
  labels: ["Manual", "Food Library", "Quick Carbs", "Favourites"],
  title: "Carb Entry Methods",
});

Platform split

import { doughnutChart } from "@hedia/chart/doughnut";
import { COLORS } from "@hedia/chart/theme";

doughnutChart({
  datasets: [
    {
      backgroundColor: [COLORS.green, COLORS.blue, COLORS.purple],
      data: [62, 35, 3],
    },
  ],
  labels: ["iOS", "Android", "Unknown"],
  legend: { position: "right" },
  title: "Platform Split",
});

Activity heatmap (category scales)

import { bubbleChart } from "@hedia/chart/bubble";
import { alpha, COLORS } from "@hedia/chart/theme";

const HOUR_LABELS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

bubbleChart({
  datasets: [
    {
      backgroundColor: alpha(COLORS.teal, 0.6),
      borderColor: COLORS.teal,
      data: [{"x":"07","y":"Mon","r":6},{"x":"08","y":"Mon","r":14},{"x":"09","y":"Mon","r":12},{"x":"12","y":"Mon","r":16},{"x":"13","y":"Mon","r":10},{"x":"17","y":"Mon","r":8},{"x":"18","y":"Mon","r":11},{"x":"20","y":"Mon","r":5},{"x":"08","y":"Tue","r":15},{"x":"09","y":"Tue","r":13},{"x":"12","y":"Tue","r":18},{"x":"13","y":"Tue","r":9},{"x":"17","y":"Tue","r":7},{"x":"19","y":"Tue","r":10},{"x":"08","y":"Wed","r":12},{"x":"09","y":"Wed","r":11},{"x":"12","y":"Wed","r":15},{"x":"17","y":"Wed","r":9},{"x":"20","y":"Wed","r":6},{"x":"10","y":"Thu","r":8},{"x":"12","y":"Thu","r":10},{"x":"14","y":"Thu","r":7},{"x":"11","y":"Fri","r":5},{"x":"13","y":"Fri","r":6}],
      label: "Events",
    },
  ],
  legend: { display: false },
  title: { text: "Hourly Activity (UTC)", padding: { bottom: 25 } },
  xLabels: HOUR_LABELS,
  yLabels: DAY_LABELS,
});

Glucose readings