Skip to main content
Charts render as native vector graphics with no image step. A chart block carries the kind, the data, and a few display options. 
{ type: "chart", chart: ChartKind, data: ChartData, height?: number, title?: string, legend?: boolean, style?: StyleProperties }

​
Chart data

type ChartKind = "bar" | "line" | "area" | "pie" | "donut";

interface ChartSeries { name?: string; values: number[]; color?: ColorLike }
interface ChartSlice  { label: string; value: number; color?: ColorLike }
interface ChartData   { labels?: string[]; series?: ChartSeries[]; slices?: ChartSlice[] }
The data shape depends on the kind.

bar, line, area

Read labels and series. Each series is a named set of values.

pie, donut

Read slices. Each slice is a labeled value.

​
Bar chart with two series

{
  type: "chart",
  chart: "bar",
  title: "Revenue by quarter",
  legend: true,
  height: 220,
  data: {
    labels: ["Q1", "Q2", "Q3", "Q4"],
    series: [
      { name: "2024", values: [12, 19, 14, 23], color: "#111827" },
      { name: "2025", values: [16, 22, 20, 28], color: "#9ca3af" },
    ],
  },
}

​
Donut chart with slices

{
  type: "chart",
  chart: "donut",
  data: { slices: [
    { label: "Direct", value: 45 },
    { label: "Partner", value: 30 },
    { label: "Online", value: 25 },
  ] },
}
Series and slice colors accept a hex string or a Color, since ColorLike = string | Color. See Color for building and converting colors.