Components

Scatter chart

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

ChartScatter places each point by two measures — deal size against cycle length, response size against latency. Points are drawn at 6 px unless pointSize says otherwise.

Screenshot of the Scatter Chart block — Scatter Chart`ChartScatter`

Usage

src/pages/dashboard.ts

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

static deals = ChartScatter({
  title: "$crm.deals.size_vs_cycle",
  fetchUrl: "/api/crm/deals/scatter",
  xaxisType: "numeric",
  showLabels: true,
});

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 Scatter 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"`	–
`pointSize`Appearance	`number`	–
`showLabels`Appearance	`boolean`	–

Recipes

Label the points

With showLabels, a point's label is what its data label shows; a point without one shows its value.

Next steps

Charts

Colors, annotations, events and the other chart types.

Chart card

Frame the chart with its headline value.

Column chart

Vertical columns comparing periods or categories, stacked or grouped.

Mixed chart

Lines, areas, columns and range bands sharing one axis, one type per series.