# SlopeChart

> Two columns, one line per category: the slope is the change.

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

Two columns, one line per category: the slope is the change. Labels with
values sit on both sides and are nudged apart when values are close, so
every name stays readable.

## Import

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

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

## Usage

```tsx
<SlopeChart
  title="Citas por servicio: septiembre contra octubre"
  items={servicios}
  fromLabel="Septiembre"
  toLabel="Octubre"
  colorBy="direction"
  lowerIsBetter={false}
  valueFormat="integer"
  tooltip
  loading={false}
  animate
  deltaLabel="Cambio"
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `readonly SlopeItem[]` |  |  |
| `title` * | `string` |  | Accessible name of the chart. |
| `description` | `string` |  |  |
| `fromLabel` | `string` | `"Before"` | Header of the left column, e.g. "Septiembre". |
| `toLabel` | `string` | `"After"` | Header of the right column, e.g. "Octubre". |
| `colorBy` | `"series" \| "direction"` | `"direction"` | "direction" colors by up, down or flat; "series" uses the palette. |
| `lowerIsBetter` | `boolean` | `false` | With `colorBy="direction"`, going down is the good news (e.g. cancellations). |
| `valueFormat` | `ValueFormat` |  |  |
| `height` | `number \| "fill"` |  | Height of the plot; by default it grows with the number of items. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the chart from the container width. |
| `legend` | `boolean` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `deltaLabel` | `string` | `"Change"` | Word for the change column of the data table and tooltip. |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-slopechart--default)
- [Series Colors](/storybook/?path=/story/charts-slopechart--series-colors)
- [Crowded Labels](/storybook/?path=/story/charts-slopechart--crowded-labels)
- [Revenue](/storybook/?path=/story/charts-slopechart--revenue)
- [Lower Is Better](/storybook/?path=/story/charts-slopechart--lower-is-better)
- [Loading](/storybook/?path=/story/charts-slopechart--loading)
- [Empty](/storybook/?path=/story/charts-slopechart--empty)
- [Narrow](/storybook/?path=/story/charts-slopechart--narrow)

## Source

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