Chart
a trend over time for two or three series, with its figures beside it in a table
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