RangeAreaChart

Live preview

Loading example…

Min–max band over time (or categories) with an optional line for the average. Several bands overlay each other; the legend toggles them. Ideal for ranges such as waiting time per day or price floor and ceiling.

Import

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

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

Usage

<RangeAreaChart
  title="Tiempo de espera mínimo y máximo por día"
  categories={days}
  bands={[waitTime]}
  height={300}
  curve="smooth"
  showMean
  grid
  tooltip
  loading={false}
  animate
  minLabel="Mín"
  maxLabel="Máx"
  meanLabel="Prom."
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`categories` *	`readonly XValue[]`
`bands` *	`readonly RangeBand[]`
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`height`	`number \| "fill"`	`300`	Height of the plot in pixels.
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`curve`	`"linear" \| "smooth" \| "step" \| "step-before" \| "step-after"`	`"smooth"`
`showMean`	`boolean`	`true`	Draw the central line of bands that provide `mean` (default true).
`valueFormat`	`ValueFormat`
`xFormat`	`((value: XValue) => string)`
`xScale`	`"time" \| "auto" \| "point"`	`"auto"`	“auto” uses a real time axis when every category is a Date.
`yAxis`	`ValueAxisOptions`
`grid`	`boolean`	`true`
`legend`	`boolean \| "top" \| "bottom"`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`initialHidden`	`readonly string[]`
`minLabel`	`string`	`"Min"`	Words used in the tooltip and the data table.
`maxLabel`	`string`	`"Max"`
`meanLabel`	`string`	`"Mean"`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/range-area-chart/range-area-chart.tsx