Bar Segment
A part-to-whole bar with optional labels, values, legend and a reference marker.
BarSegment splits a single bar into colored segments. Each datum needs a
name, value and color.
'use client'
import { BarSegment, useChart } from '@saas-ui/charts'
const data = [
{ name: 'Starter', value: 70, color: 'indigo.solid' },
{ name: 'Pro', value: 40, color: 'pink.solid' },
{ name: 'Enterprise', value: 25, color: 'fg' },
]
export const BarSegmentBasic = () => {
const chart = useChart({ data })
return (
<BarSegment.Root chart={chart} maxW="lg">
<BarSegment.Content>
<BarSegment.Bar tooltip />
</BarSegment.Content>
</BarSegment.Root>
)
}
Usage
import { BarSegment, useChart } from '@saas-ui/charts'const chart = useChart({
data: [
{ name: 'Starter', value: 70, color: 'indigo.solid' },
{ name: 'Pro', value: 40, color: 'pink.solid' },
{ name: 'Enterprise', value: 25, color: 'fg' },
],
})
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Bar tooltip />
</BarSegment.Content>
</BarSegment.Root>Anatomy
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Label />
<BarSegment.Bar tooltip>
<BarSegment.Reference value={80} label="Limit" />
</BarSegment.Bar>
<BarSegment.Value />
</BarSegment.Content>
<BarSegment.Legend showValue showPercent />
</BarSegment.Root>Segment width is the value's share of the total. BarSegment.Label and
BarSegment.Value use the same flex basis so they line up with the bar.
Legend
BarSegment.Legend lists each segment with a swatch. Set showValue and
showPercent to print the number and share.
Starter
Pro
Enterprise
70
40
25
Starter
7052%Pro
4030%Enterprise
2519%'use client'
import { BarSegment, useChart } from '@saas-ui/charts'
const data = [
{ name: 'Starter', value: 70, color: 'indigo.solid' },
{ name: 'Pro', value: 40, color: 'pink.solid' },
{ name: 'Enterprise', value: 25, color: 'fg' },
]
export const BarSegmentWithLegend = () => {
const chart = useChart({ data })
return (
<BarSegment.Root chart={chart} maxW="lg">
<BarSegment.Content>
<BarSegment.Label />
<BarSegment.Bar tooltip />
<BarSegment.Value />
</BarSegment.Content>
<BarSegment.Legend showValue showPercent />
</BarSegment.Root>
)
}
Reference
BarSegment.Reference draws a marker at an absolute value on the same
scale, useful for a quota or limit.
Limit
Used
7272%Available
2828%'use client'
import { BarSegment, useChart } from '@saas-ui/charts'
const data = [
{ name: 'Used', value: 72, color: 'indigo.solid' },
{ name: 'Available', value: 28, color: 'bg.muted' },
]
export const BarSegmentWithReference = () => {
const chart = useChart({ data })
return (
<BarSegment.Root chart={chart} maxW="lg">
<BarSegment.Content>
<BarSegment.Bar>
<BarSegment.Reference value={80} label="Limit" />
</BarSegment.Bar>
</BarSegment.Content>
<BarSegment.Legend showValue showPercent />
</BarSegment.Root>
)
}