Skip to content
@jcsoftdev/ui

AreaChart

Open .md
Live preview

Loading example…

Volume over time with a soft gradient fill. stack="normal" piles series into a total; stack="percent" shows each one’s share of 100%.

Import

Section titled “Import”
import { AreaChart } from "@jcsoftdev/ui/charts";

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

Usage

Section titled “Usage”
<AreaChart
  title="Servicios vendidos por semana"
  categories={weeks}
  valueFormat="integer"
  height={300}
  curve="smooth"
  stack="none"
  gradient
  markers={false}
  dataLabels={false}
  brush={false}
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Section titled “Props”
Prop Type Default Description
series * readonly ChartSeries[]
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).
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).
xScale "time" | "auto" | "band" “time” spaces dates by real elapsed time; “auto” picks it when every category is a Date and no series is a column.
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.
brush boolean Drag-to-zoom on the plot plus an overview brush with a reset button.
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

Section titled “Storybook stories”

Source

Section titled “Source”

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