Components

Column chart

Vertical columns comparing periods or categories, stacked or grouped.

ChartColumn draws vertical columns. Use it to compare periods (orders per month) or a handful of categories, with stacked: true to show their composition.

Screenshot of the Column Chart block — Column Chart`ChartColumn`

Usage

src/pages/dashboard.ts

import { ChartColumn } from "@antelopejs/interface-dms/base/chart";

static orders = ChartColumn({
  title: "$shop.orders.per_month",
  fetchUrl: "/api/shop/orders-per-month",
  columnWidth: 60,
});

The route answers { series } in the shape listed under Data shapes. Wrap the chart in a ChartCard to add a headline value and a comparison.

Options

Options of the Column Chart block
Option	Type	Default
`title`Content	`string`	–
`description`Content	`string`	–
`color`Appearance	`string \| string[]`	–
`height`Appearance	`string`	–
`width`Appearance	`number`	–
`showTooltip`Appearance	`boolean`	`true`
`showLegend`Appearance	`boolean`	`true`
`legendPosition`Appearance	`"top" \| "bottom"`	–
`showGrid`Appearance	`boolean`	`true`
`yRange.min`*Appearance	`number`	–
`yRange.max`*Appearance	`number`	–
`comparisonStyle`Appearance	`"dashed" \| "solid" \| "dimmed"`	–
`smooth`Appearance	`boolean`	`true`
`curve`Appearance	`"smooth" \| "straight" \| "stepline"`	–
`xaxisType`Appearance	`"category" \| "datetime" \| "numeric"`	–
`stacked`Appearance	`boolean`	–
`columnWidth`Appearance	`number`	–
`roundedCorners`Appearance	`boolean`	`true`

Recipes

Columns with a target

Add annotations: [{ y: 1200, label: "Target" }] to draw the goal across the columns.

Next steps

Charts

Colors, annotations, events and the other chart types.

Chart card

Frame the chart with its headline value.

Bar chart

Horizontal bars comparing categories, stacked or grouped.

Scatter chart

Points placing each item on two measures, with optional labels.