Bar Charts

Bar chart variations built with @ramtt/charts primitives

ChartBar + ChartTooltip + ChartGrid

Bar Chart - Interactive

Showing total visitors for the selected period

Desktop

26,683

Mobile

10,571

ChartBar + ChartTooltip

Bar Chart

January - June 2024

Trending up by 5.2% this month
Showing total visitors for the last 6 months
ChartBar (orientation=horizontal)

Bar Chart - Horizontal

January - June 2024

Trending up by 5.2% this month
Showing total visitors for the last 6 months
ChartBar (groupIndex + groupCount)

Bar Chart - Multiple

January - June 2024

Trending up by 5.2% this month
Showing total visitors for the last 6 months
ChartBar + stackSeries + ChartTooltip

Bar Chart - Stacked + Legend

January - June 2024

Desktop
Mobile
Trending up by 5.2% this month
Showing total visitors for the last 6 months
ChartBar (showLabels=outside)

Bar Chart - Label

January - June 2024

Trending up by 5.2% this month
Showing total visitors for the last 6 months
ChartBar (horizontal + showLabels)

Bar Chart - Custom Label

January 2024

Chrome leads with 275 visitors
Browser market share
ChartBar (horizontal + colorFn)

Bar Chart - Mixed

January 2024

Chrome dominates with 275 visitors
Browser market share with colored bars
ChartBar (activeIndex)

Bar Chart - Active

Click bars to highlight

Chrome: 275 visitors
Click to change active bar
ChartBar (colorFn + negative values)

Bar Chart - Negative

January - June 2024

Some months with negative growth
Values above and below zero
ChartBar + ChartAxisX + ChartAxisY + ChartTooltip

Bar Chart - Axes

January - June 2024

Trending up by 5.2% this month
Grouped bars with full axes and tooltip
ChartBar (horizontal + labelFormat)

Bar Chart - Percentage

January 2024

Chrome at 30% market share
Browser share as percentage of total