# Bar Segment

```tsx
"use client"

import { BarSegment, useChart } from "@chakra-ui/charts"

export const BarSegmentBasic = () => {
  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

```tsx
import { BarSegment, Chart, useChart } from "@chakra-ui/charts"
```

```tsx
<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.

```tsx
"use client"

import { BarSegment, useChart } from "@chakra-ui/charts"

export const BarSegmentWithBarSize = () => {
  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.

```tsx
"use client"

import { BarSegment, useChart } from "@chakra-ui/charts"

export const BarSegmentWithLegend = () => {
  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.

```tsx
"use client"

import { BarSegment, useChart } from "@chakra-ui/charts"

export const BarSegmentWithTooltip = () => {
  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.

```tsx
"use client"

import { BarSegment, useChart } from "@chakra-ui/charts"

export const BarSegmentWithReference = () => {
  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>
  )
}

```