#Charts

Helm renders charts as SVG images from a Vega-Lite specification. A chart is just an image URL, so it drops into any surface that shows an image — an <img> tag, a dashboard KPI tile, a markdown widget. The platform generates the image URL for you; it is short-lived and signed, so you embed it and display it, nothing more.

Anything Vega-Lite can draw, Helm can render. The spec is a standard Vega-Lite TopLevelSpec — set its data.values to your rows and pick a mark. The examples below are complete specs you can adapt; the vega-lite TypeScript types (import type { TopLevelSpec } from "vega-lite") help with the shape.

#Bar chart

Copyconst spec: TopLevelSpec = {
  width: 300,
  height: 200,
  data: {
    values: [
      { region: "North", sales: 120 },
      { region: "South", sales: 90 },
      { region: "East", sales: 150 },
      { region: "West", sales: 60 },
    ],
  },
  mark: "bar",
  encoding: {
    x: { field: "region", type: "nominal", title: "Region" },
    y: { field: "sales", type: "quantitative", title: "Sales" },
  },
};

#Pie chart

Copyconst spec: TopLevelSpec = {
  width: 200,
  height: 200,
  data: {
    values: [
      { browser: "Chrome", share: 65 },
      { browser: "Safari", share: 19 },
      { browser: "Edge", share: 9 },
      { browser: "Firefox", share: 7 },
    ],
  },
  mark: "arc",
  encoding: {
    theta: { field: "share", type: "quantitative", title: "Share" },
    color: { field: "browser", type: "nominal", title: "Browser" },
  },
};

#Line chart

Copyconst spec: TopLevelSpec = {
  width: 300,
  height: 200,
  data: {
    values: [
      { month: "Jan", visitors: 40 },
      { month: "Feb", visitors: 55 },
      { month: "Mar", visitors: 48 },
      { month: "Apr", visitors: 70 },
      { month: "May", visitors: 65 },
    ],
  },
  mark: "line",
  encoding: {
    x: { field: "month", type: "ordinal", title: "Month" },
    y: { field: "visitors", type: "quantitative", title: "Visitors" },
  },
};

#Scatter chart

Copyconst spec: TopLevelSpec = {
  width: 300,
  height: 200,
  data: {
    values: [
      { hours: 1, score: 52 },
      { hours: 2, score: 58 },
      { hours: 3, score: 63 },
      { hours: 4, score: 70 },
      { hours: 5, score: 68 },
      { hours: 6, score: 82 },
      { hours: 7, score: 90 },
    ],
  },
  mark: "point",
  encoding: {
    x: { field: "hours", type: "quantitative", title: "Hours studied" },
    y: { field: "score", type: "quantitative", title: "Test score" },
  },
};