Bar

A bar chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add chart

Usage

Basic

Stacked

You can stack the bar chart by settings prop type to stacked.

Rounded Corners

If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition here.

Area

An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.

Donut

A donut chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.