Chart

Render data visualizations (line, bar, area, pie, donut, scatter, funnel, KPI) from series/categories or KPI fields. Chart engine is managed internally.

HTML tag: c-e8d817b79046b40ea9e9771cc4e4d3aff

When to use

• visualize metrics as charts
• KPI, line, bar, pie, funnel, or scatter
• chart inside ab-dashlet on ab-dashboard (never direct child of dashboard)
• pre-aggregated daily/monthly trend with x_axis.infer_time false

Props

Prop	Type	Default	Description
chart_type	string	line
series	array
categories	array
height	number	300
loading	boolean	false
value	number
format	string	number
x_axis	object
debug	boolean	false
title	string	“
subtitle	string	“
orientation	string	vertical
stacked	boolean	false
show_legend	boolean	true
show_tooltip	boolean	true
empty_message	string	No data available
sort	string	descending
gap	number	4
label_position	string	inside
label	string	“
delta	number
trend	string	neutral
y_axis	object
value_format	string	“
time_granularity	string	“
annotations	array
thresholds	array
currency	string	USD

Rules

• Always provide a valid data shape for the chosen chart_type.
• Use exactly one chart_type per ab-chart instance.
• On dashboards: ab-dashboard > ab-dashlet > ab-chart (no ab-card between dashlet and chart).
• For cartesian charts, categories.length must equal series[].data.length (aligned by index).
• Declare chart data source arrays on the parent Lit component in static get properties() so async fetches trigger re-render.
• Wire ab-dashlet .loading and .empty from parent fetch state; use ab-chart .loading only when you want the in-chart placeholder.

What to avoid

Do not embed multiple chart types in one instance. Do not place dashboard charts directly under ab-dashboard without ab-dashlet. Do not wrap ab-chart in ab-card inside ab-dashlet on dashboards — ab-card is for pages/forms, not dashboard tiles. Do not use provider/plan/category fallback data for a chart titled like a time series. Do not assign chart data on undeclared parent fields — Lit will not re-render.

Example

<c-e0dfd2e72decc4928b34a21a035798d38 .title=${'Bookings Over Time'} .span=${3} .loading=${loading} .empty=${!timelineCategories.length}>
  <c-e8d817b79046b40ea9e9771cc4e4d3aff .chart_type=${'line'} .categories=${timelineCategories} .series=${timelineSeries} .x_axis=${{ infer_time: false }} .height=${260}></c-e8d817b79046b40ea9e9771cc4e4d3aff>
</c-e0dfd2e72decc4928b34a21a035798d38>