# LollipopChart

> A stick and a dot per category: the quiet cousin of the bar chart, good for many categories or when the exact end value matters more than the area.

Source: https://ui.jcsoftdev.com/docs/components/lollipop-chart

A stick and a dot per category: the quiet cousin of the bar chart, good for
many categories or when the exact end value matters more than the area.
Negative values hang from the zero line.

## Import

```ts
import { LollipopChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/lollipop-chart`.

## Usage

```tsx
<LollipopChart
  title="Servicios más vendidos en octubre"
  seriesName="Vendidos"
  items={services}
  orientation="horizontal"
  sort="none"
  valueFormat="integer"
  dotSize={7}
  dataLabels
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `readonly LollipopItem[]` |  |  |
| `title` * | `string` |  | Accessible name of the chart. |
| `description` | `string` |  |  |
| `seriesName` | `string` | `"Value"` | Name of the measure (tooltip and data table). |
| `color` | `string` |  | Color of the sticks and dots (default: the brand slot of the palette). |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `sort` | `"desc" \| "none" \| "asc"` | `"none"` | Largest first, smallest first, or in data order (default). |
| `valueFormat` | `ValueFormat` |  |  |
| `height` | `number \| "fill"` |  | Height in pixels, `"fill"` for the parent height. Rows size themselves in horizontal charts when omitted. |
| `aspectRatio` | `number` |  |  |
| `rowHeight` | `number` | `34` | Height of every row in pixels (default 34), horizontal charts without `height`. |
| `dotSize` | `number` | `7` | Radius of the dots in pixels (default 7). |
| `dataLabels` | `boolean` | `true` | Values printed beside the dots (default true). |
| `yAxis` | `ValueAxisOptions` |  |  |
| `grid` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-lollipopchart--default)
- [Vertical](/storybook/?path=/story/charts-lollipopchart--vertical)
- [Sorted](/storybook/?path=/story/charts-lollipopchart--sorted)
- [Negative Values](/storybook/?path=/story/charts-lollipopchart--negative-values)
- [Loading](/storybook/?path=/story/charts-lollipopchart--loading)
- [Empty](/storybook/?path=/story/charts-lollipopchart--empty)
- [Fill Parent](/storybook/?path=/story/charts-lollipopchart--fill-parent)
- [Narrow](/storybook/?path=/story/charts-lollipopchart--narrow)

## Source

`packages/ui/src/charts/lollipop-chart/lollipop-chart.tsx`