shadcn.io is not affiliated with official shadcn/ui
Chart examples · Bar
A multiple bar chart for React
A bar chart grouping desktop and mobile bars side by side for each month.
Use grouped bars to compare two series month by month. Desktop and mobile sit side by side in each month, each in its own color, and the tooltip lists both with a dashed indicator.
Preview
Installation
FAQ
How are desktop and mobile shown side by side?
Two Bar components share the chart. One uses dataKey desktop and fill var(--color-desktop). The other uses dataKey mobile and fill var(--color-mobile). Both set radius to 4.
Where do the two colors come from?
config sets desktop to var(--chart-1) with the label Desktop, and mobile to var(--chart-2) with the label Mobile. ChartContainer turns those into --color-desktop and --color-mobile.
How are the months abbreviated?
XAxis uses dataKey month and tickFormatter set to formatMonth, the first three characters. axisLine and tickLine are false, and tickMargin is 10. CartesianGrid sets vertical to false.
Why is the tooltip indicator dashed?
ChartTooltipContent sets indicator to dashed, and cursor is false. Hovering a month lists both series, named Desktop and Mobile from config, under that month.
Related
- A bar chartA bar chart with rounded corners
- A stacked bar chart with a legendA bar chart stacking desktop and mobile
- A simple area chartA single-series area chart with a smooth
- A multiple line chartA line chart comparing desktop and mobile
- A horizontal bar chartA bar chart laid out horizontally, with
- An interactive bar chartA bar chart of three months of daily page