Bar chart

ChartBar compares categories with bars. Its default orientation is horizontal, which leaves room for long category labels; set orientation: "vertical" or use a column chart for periods.

Preview Code

Connecting to the DMS preview…

static chartBar = ChartBar({
  title: "Tickets by team",
  height: "240px",
  staticDataset: [
    {
      name: "Open",
      data: [
        { x: "Billing", y: 42 },
        { x: "Onboarding", y: 31 },
        { x: "Integrations", y: 27 },
        { x: "Security", y: 12 },
      ],
    },
  ],
  type: "bar",
});

Usage

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

static tickets = ChartBar({
  title: "$support.tickets.by_team",
  fetchUrl: "/api/support/tickets-by-team",
  stacked: 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

Recipes

Stack statuses

stacked: true piles the series of each category into one bar: open, pending and closed tickets per team.

Next steps