@chart Blocks

Create data visualizations with bar, line, pie, scatter, and area charts.

Quick Example

@chart {
  type: "bar";
  title: "Quarterly Sales";
  data: [
    { label: "Q1"; values: [100]; },
    { label: "Q2"; values: [150]; },
    { label: "Q3"; values: [200]; },
    { label: "Q4"; values: [180]; }
  ];
  options: {
    xAxis: "Quarter";
    yAxis: "Revenue ($K)";
    legend: true;
  };
}

Chart Types

Bar Chart

Best for comparing values across categories.

@chart {
  type: "bar";
  title: "Sales by Region";
  data: [
    { label: "North"; values: [850]; },
    { label: "South"; values: [620]; },
    { label: "East"; values: [740]; },
    { label: "West"; values: [890]; }
  ];
}

Line Chart

Best for showing trends over time.

@chart {
  type: "line";
  title: "Monthly Revenue";
  data: [
    { label: "Jan"; values: [100]; },
    { label: "Feb"; values: [120]; },
    { label: "Mar"; values: [140]; },
    { label: "Apr"; values: [165]; }
  ];
}

Pie Chart

Best for showing proportions of a whole.

@chart {
  type: "pie";
  title: "Market Share";
  data: [
    { label: "Product A"; values: [45]; },
    { label: "Product B"; values: [30]; },
    { label: "Product C"; values: [25]; }
  ];
}

Scatter Plot

Best for showing correlations between variables.

@chart {
  type: "scatter";
  title: "Price vs Demand";
  data: [
    { label: "Data Points"; values: [10, 20, 15, 25, 30]; }
  ];
}

Area Chart

Best for showing cumulative values over time.

@chart {
  type: "area";
  title: "Cumulative Sales";
  data: [
    { label: "Week 1"; values: [100]; },
    { label: "Week 2"; values: [220]; },
    { label: "Week 3"; values: [360]; }
  ];
}

Chart Options

Available Options

xAxis (string)

Label for the X axis

yAxis (string)

Label for the Y axis

legend (boolean)

Show/hide legend (default: true)

colors (string[])

Custom colors for data series

@chart {
  type: "bar";
  title: "Styled Chart";
  data: [
    { label: "A"; values: [10]; },
    { label: "B"; values: [20]; }
  ];
  options: {
    xAxis: "Categories";
    yAxis: "Values";
    legend: false;
    colors: ["#3B82F6", "#10B981"];
  };
}

Multi-Series Charts

Create charts with multiple data series by providing multiple value arrays:

@chart {
  type: "bar";
  title: "Sales Comparison";
  data: [
    { label: "Q1"; values: [100, 120, 90]; },
    { label: "Q2"; values: [150, 140, 160]; },
    { label: "Q3"; values: [200, 180, 220]; }
  ];
  options: {
    xAxis: "Quarter";
    yAxis: "Revenue ($K)";
    legend: true;
    colors: ["#3B82F6", "#10B981", "#F59E0B"];
  };
}

Note: Each values array represents a different series. In this example, three series are shown across four quarters.

How Charts Render

PDF

Rendered using Chart.js with full interactivity and high quality.

DOCX

Converted to data tables with labels and values clearly formatted.

PPTX

Rendered as native PowerPoint charts that can be edited.

Try It Yourself

Test @chart blocks in the interactive playground:

Open Playground →

← Back to v1.0 Release Notes Next: @diagram Blocks →