Chart

a trend over time for two or three series, with its figures beside it in a table

role: dashboard pages: app, analytics, billing motion: none

Install

npx shadcn-vue@latest add @trame/saas-chart   # Vue
npx shadcn@latest add @trame/saas-chart       # React

line-table

@trame/saas-chart--line-table

a trend over time for two or three series, with its figures beside it in a table

area

@trame/saas-chart--area

Continuous series read as filled areas with distinct outlines and the merchant’s own values.

grouped-bars

@trame/saas-chart--grouped-bars

Compare the merchant’s own series side by side within each category on one shared scale.

ranked-bars

@trame/saas-chart--ranked-bars

categories ranked from the largest as horizontal bars with the value at their end (channels, pages, categories): when the labels are too long to sit under columns

donut

@trame/saas-chart--donut

shares of a whole as a ring with the sum in its centre and each part’s value and share beside it: one series of up to six parts, or a few series compared by their sums

stacked-area

@trame/saas-chart--stacked-area

several series stacked as bands over time so the top edge reads the sum (traffic by source, sales by channel): when the total matters as much as the parts

funnel

@trame/saas-chart--funnel

the steps of a journey in their order (visitors, carts, orders) as narrowing bars with each step’s share of the first and of the one before