Line chart

ChartLine draws one line per series over a category, datetime or numeric x axis. Use it for a trend over time — requests, revenue, latency — and its comparison series for the previous period.

Preview Code

Connecting to the DMS preview…

static chartLine = ChartLine({
  title: "Response time",
  height: "240px",
  curve: "smooth",
  strokeWidth: 2,
  annotations: [{ y: 300, label: "SLO", color: "error" }],
  staticDataset: [
    { name: "p50", data: [120, 132, 118, 140, 151, 138, 129] },
    { name: "p95", data: [210, 245, 230, 280, 310, 265, 240] },
  ],
  type: "line",
});

Usage

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

static latency = ChartLine({
  title: "$api.metrics.latency",
  fetchUrl: "/api/metrics/latency",
  periodScope: "api",
  xaxisType: "datetime",
  curve: "smooth",
  annotations: [{ y: 300, label: "SLO", color: "error" }],
  syncGroup: "metrics",
});

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

Recipes

Steps instead of curves

curve: "stepline" draws a value that changes by steps (replicas, plan limits). curve wins over smooth when both are set.

Read a stacked grid together

Give every chart of a metrics grid the same syncGroup: hovering one moves the tooltip of all of them.

Next steps