ComboChart

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

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

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

Usage

<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
• Columns And Area
• Stacked Columns With Total Line
• Multi Axis
• Multi Axis Narrow
• Loading

Source

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