# ComboChart

> Columns and lines on one plot, e.g.

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

Columns and lines on one plot, e.g. revenue as columns with appointments
as a line on a second axis. `stack` applies to the columns only.

## Import

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

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

## Usage

```tsx
<ComboChart
  title="Ventas y citas de la semana"
  categories={days}
  series={[
      { id: "ventas", name: "Ventas", type: "column", data: revenue, format: "currency" },
      {
        id: "citas",
        name: "Citas",
        type: "line",
        axis: "right",
        data: appointments,
        format: "integer",
      },
    ]}
  yAxis={{ format: "currency", title: "S/" }}
  rightAxis={{ title: "Citas" }}
  height={320}
  curve="smooth"
  markers
  dataLabels={false}
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `series` * | `readonly ComboSeries[]` |  |  |
| `legend` | `boolean \| "top" \| "bottom"` |  | Legend placement, or false to hide it. Defaults to "top" with two or more series. |
| `title` * | `string` |  | Accessible name of the chart (`aria-label` of the drawing). |
| `animate` | `boolean` |  | Entry animation (default true; always off with prefers-reduced-motion). |
| `className` | `string` |  |  |
| `grid` | `boolean` |  | Background gridlines (default true). |
| `tooltip` | `boolean` |  | Shared tooltip (default true). |
| `gradient` | `boolean` |  | Gradient fill under areas (default true). |
| `barRadius` | `number` |  | Corner radius at the value end of bars, 6 by default. |
| `rightAxis` | `ValueAxisOptions` |  | Secondary axis for series with `axis: "right"`. |
| `categories` * | `readonly XValue[]` |  | One entry per data point: strings, numbers or dates. |
| `description` | `string` |  | Extra sentence for the hidden data table caption. |
| `height` | `number \| "fill"` |  | Height of the plot in pixels, 300 by default. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the plot from the container width (wins over a pixel `height`). |
| `stack` | `"normal" \| "none" \| "percent"` |  | Stacks every area and column series. |
| `curve` | `"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"` | `"smooth"` |  |
| `markers` | `boolean` |  | Dots on every line point. Hovered points are always marked. |
| `dataLabels` | `boolean` |  | Values printed on the marks. |
| `lineGradient` | `boolean` |  | Strokes lines with a gradient from each series color to the next palette color. |
| `transition` | `boolean` |  | Eases lines and areas between data updates (live data); off by default. |
| `maxPoints` | `number \| false` |  | Series with more points than this are reduced with LTTB, 2000 by default; `false` draws every point. |
| `syncId` | `string` |  | Charts with the same id share hover (crosshair and tooltip) and the zoom window. |
| `onPointClick` | `((point: CartesianPointEvent) => void)` |  | Called with the category (and nearest series) under the pointer when the plot is clicked or Enter is pressed. |
| `valueFormat` | `ValueFormat` |  | Format of values in tooltips, labels and the data table. |
| `xFormat` | `((value: XValue) => string)` |  | Label of a category on the axis and in the tooltip (dates get Spanish defaults). |
| `yAxis` | `ValueAxisOptions` |  |  |
| `axes` | `readonly CartesianAxisSpec[]` |  | Any number of value axes. `yAxis` and `rightAxis` are shorthand for the ids "left" and "right"; more entries stack outward on their `side` (right by default) and series pick one with `axis`. |
| `annotations` | `readonly ChartAnnotation[]` |  |  |
| `categoryLabelRotation` | `number` |  | Tilts the category labels (degrees, e.g. -45) so long names fit; vertical charts only. |
| `categoryGroups` | `readonly CategoryGroup[]` |  | Second tier of labels under the category axis (vertical charts); counts must add up to the categories. |
| `onCategoryClick` | `((index: number) => void)` |  | Click (or Enter on the focused plot) on a category; receives its index in `categories`. |
| `overlay` | `CartesianOverlay` |  | Extra layers over the plot, e.g. the ruler and ink tools of `useChartInk`. Vertical charts only. |
| `rangeSelect` | `{ value: readonly [number, number] \| null; onChange: (range: readonly [number, number] \| null) => void; }` |  |  |
| `loading` | `boolean` |  |  |
| `initialHidden` | `readonly string[]` |  | Series hidden at first; the legend can show them. |
| `labels` | `Partial<ChartLabels>` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-combochart--default)
- [Columns And Area](/storybook/?path=/story/charts-combochart--columns-and-area)
- [Stacked Columns With Total Line](/storybook/?path=/story/charts-combochart--stacked-columns-with-total-line)
- [Multi Axis](/storybook/?path=/story/charts-combochart--multi-axis)
- [Multi Axis Narrow](/storybook/?path=/story/charts-combochart--multi-axis-narrow)
- [Loading](/storybook/?path=/story/charts-combochart--loading)

## Source

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