Bar Segment

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.

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.

Tooltip

Pass the tooltip prop to the BarSegment.Bar component to show a tooltip when hovering over the bar.

Reference

To reference a specific value on the chart, use the BarSegment.Reference component.