Mixed chart

ChartMixed draws each series with its own type — columns for volume, a line for a rate, a band for a range — on one shared x axis. seriesDefs names each series' type and color.

Preview Code

Connecting to the DMS preview…

static chartMixed = ChartMixed({
  title: "Orders and conversion",
  height: "260px",
  seriesDefs: [
    { name: "Orders", type: "column" },
    { name: "Visits", type: "line" },
  ],
  staticDataset: [
    { name: "Orders", data: [82, 91, 87, 102, 114, 128] },
    {
      name: "Visits",
      data: [2400, 2600, 2500, 2900, 3100, 3300],
    },
  ],
  type: "mixed",
});

Usage

import { ChartMixed } from "@antelopejs/interface-dms/base/chart";
import { ChartType } from "@antelopejs/interface-dms/base/chart-type";

static funnel = ChartMixed({
  title: "$shop.funnel.orders_and_visits",
  fetchUrl: "/api/shop/funnel",
  seriesDefs: [
    { name: "Orders", type: ChartType.COLUMN },
    { name: "Visits", type: ChartType.LINE, color: "info" },
  ],
});

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

A band with a median

Declare one series as ChartType.RANGE_AREA and another as ChartType.LINE to draw a percentile band with its median on top.

Next steps