Bar Segment
Used to display data as segments within a horizontal bar, showing proportions and part-to-whole relationships between values
500K
200K
100K
100K
Google
Bing
Direct
Yandex
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>
)
}
Usage
import { BarSegment, Chart, useChart } from "@chakra-ui/charts"<BarSegment.Root>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>Examples
Bar Size
Pass the barSize prop to the BarSegment.Root component to configure the size
of the bar.
Ruby
35%JavaScript
23%React
17%HTML
13%CSS
12%"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Ruby", value: 450000, color: "green.solid" },
{ name: "CSS", value: 150000, color: "yellow.solid" },
{ name: "JavaScript", value: 300000, color: "orange.solid" },
{ name: "HTML", value: 175000, color: "purple.solid" },
{ name: "React", value: 225000, color: "blue.solid" },
],
})
return (
<BarSegment.Root chart={chart} barSize="3">
<BarSegment.Content>
<BarSegment.Bar gap="0.5" />
</BarSegment.Content>
<BarSegment.Legend gap="2" textStyle="xs" showPercent />
</BarSegment.Root>
)
}
Legend
Use the BarSegment.Legend component to render the legend. You can pass
showPercent and showValue to control the visibility of the percentage and
values.
500K
200K
100K
100K
Bing
22%Direct
11%Yandex
11%"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
</BarSegment.Content>
<BarSegment.Legend showPercent />
</BarSegment.Root>
)
}
Tooltip
Pass the tooltip prop to the BarSegment.Bar component to show a tooltip when
hovering over the bar.
Bing
22%Direct
11%Yandex
11%"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Bar tooltip />
</BarSegment.Content>
<BarSegment.Legend showPercent />
</BarSegment.Root>
)
}
Reference
To reference a specific value on the chart, use the BarSegment.Reference
component.
500K
200K
100K
80K
Target
Google
Bing
Direct
Yandex
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 80000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar>
<BarSegment.Reference label="Target" value={200000} />
</BarSegment.Bar>
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>
)
}