Docs Charts Core charts

AreaChart

const areaChartFixture = {
  id: "area-chart",
  data: [
    { x: 0, y: 0.1, label: "00:00" },
    { x: 1, y: 0.1, label: "01:00" },
    { x: 2, y: 0.1, label: "02:00" },
    { x: 3, y: 0.1, label: "03:00" },
    { x: 4, y: 0.2, label: "04:00" },
    { x: 5, y: 0.4, label: "05:00" },
    { x: 6, y: 0.8, label: "06:00" },
    { x: 7, y: 2.1, label: "07:00" },
    { x: 8, y: 4.6, label: "08:00" },
    { x: 9, y: 6.8, label: "09:00" },
    { x: 10, y: 8.4, label: "10:00" },
    { x: 11, y: 9.6, label: "11:00" },
    { x: 12, y: 10.2, label: "12:00" },
    { x: 13, y: 9.7, label: "13:00" },
    { x: 14, y: 8.8, label: "14:00" },
    { x: 15, y: 7.4, label: "15:00" },
    { x: 16, y: 5.1, label: "16:00" },
    { x: 17, y: 2.8, label: "17:00" },
    { x: 18, y: 1.2, label: "18:00" },
    { x: 19, y: 0.5, label: "19:00" },
    { x: 20, y: 0.2, label: "20:00" },
    { x: 21, y: 0.1, label: "21:00" },
    { x: 22, y: 0.1, label: "22:00" },
    { x: 23, y: 0.1, label: "23:00" },
  ],
  ariaLabel: "Rooftop solar generation in kilowatts by hour, 8 July 2026",
  tooltip: true,
  legend: false,
};
 
import { AreaChart } from "@grassroot/charts-react";
 
export default function AreaChartDemo() {
  return (
    <div>
      <AreaChart {...areaChartFixture} />
    </div>
  );
}

<script setup lang="ts">
const areaChartFixture = {
  id: "area-chart",
  data: [
    { x: 0, y: 0.1, label: "00:00" },
    { x: 1, y: 0.1, label: "01:00" },
    { x: 2, y: 0.1, label: "02:00" },
    { x: 3, y: 0.1, label: "03:00" },
    { x: 4, y: 0.2, label: "04:00" },
    { x: 5, y: 0.4, label: "05:00" },
    { x: 6, y: 0.8, label: "06:00" },
    { x: 7, y: 2.1, label: "07:00" },
    { x: 8, y: 4.6, label: "08:00" },
    { x: 9, y: 6.8, label: "09:00" },
    { x: 10, y: 8.4, label: "10:00" },
    { x: 11, y: 9.6, label: "11:00" },
    { x: 12, y: 10.2, label: "12:00" },
    { x: 13, y: 9.7, label: "13:00" },
    { x: 14, y: 8.8, label: "14:00" },
    { x: 15, y: 7.4, label: "15:00" },
    { x: 16, y: 5.1, label: "16:00" },
    { x: 17, y: 2.8, label: "17:00" },
    { x: 18, y: 1.2, label: "18:00" },
    { x: 19, y: 0.5, label: "19:00" },
    { x: 20, y: 0.2, label: "20:00" },
    { x: 21, y: 0.1, label: "21:00" },
    { x: 22, y: 0.1, label: "22:00" },
    { x: 23, y: 0.1, label: "23:00" },
  ],
  ariaLabel: "Rooftop solar generation in kilowatts by hour, 8 July 2026",
  tooltip: true,
  legend: false,
};
 
import { AreaChart } from "@grassroot/charts-vue";
</script>
<template><AreaChart v-bind="areaChartFixture" /></template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
const areaChartFixture = {
  id: "area-chart",
  data: [
    { x: 0, y: 0.1, label: "00:00" },
    { x: 1, y: 0.1, label: "01:00" },
    { x: 2, y: 0.1, label: "02:00" },
    { x: 3, y: 0.1, label: "03:00" },
    { x: 4, y: 0.2, label: "04:00" },
    { x: 5, y: 0.4, label: "05:00" },
    { x: 6, y: 0.8, label: "06:00" },
    { x: 7, y: 2.1, label: "07:00" },
    { x: 8, y: 4.6, label: "08:00" },
    { x: 9, y: 6.8, label: "09:00" },
    { x: 10, y: 8.4, label: "10:00" },
    { x: 11, y: 9.6, label: "11:00" },
    { x: 12, y: 10.2, label: "12:00" },
    { x: 13, y: 9.7, label: "13:00" },
    { x: 14, y: 8.8, label: "14:00" },
    { x: 15, y: 7.4, label: "15:00" },
    { x: 16, y: 5.1, label: "16:00" },
    { x: 17, y: 2.8, label: "17:00" },
    { x: 18, y: 1.2, label: "18:00" },
    { x: 19, y: 0.5, label: "19:00" },
    { x: 20, y: 0.2, label: "20:00" },
    { x: 21, y: 0.1, label: "21:00" },
    { x: 22, y: 0.1, label: "22:00" },
    { x: 23, y: 0.1, label: "23:00" },
  ],
  ariaLabel: "Rooftop solar generation in kilowatts by hour, 8 July 2026",
  tooltip: true,
  legend: false,
};
 
import { GrassrootAreaChart } from "@grassroot/charts-angular";
@Component({
  selector: "app-area-chart-chart-demo",
  standalone: true,
  imports: [GrassrootAreaChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-area-chart
    [data]="fixture.data" [ariaLabel]="fixture.ariaLabel"
  />`,
})
export class AreaChartDemoComponent {
  readonly fixture = areaChartFixture;
}
export default AreaChartDemoComponent;

<script lang="ts">
  const areaChartFixture = {
    id: "area-chart",
    data: [
      { x: 0, y: 0.1, label: "00:00" },
      { x: 1, y: 0.1, label: "01:00" },
      { x: 2, y: 0.1, label: "02:00" },
      { x: 3, y: 0.1, label: "03:00" },
      { x: 4, y: 0.2, label: "04:00" },
      { x: 5, y: 0.4, label: "05:00" },
      { x: 6, y: 0.8, label: "06:00" },
      { x: 7, y: 2.1, label: "07:00" },
      { x: 8, y: 4.6, label: "08:00" },
      { x: 9, y: 6.8, label: "09:00" },
      { x: 10, y: 8.4, label: "10:00" },
      { x: 11, y: 9.6, label: "11:00" },
      { x: 12, y: 10.2, label: "12:00" },
      { x: 13, y: 9.7, label: "13:00" },
      { x: 14, y: 8.8, label: "14:00" },
      { x: 15, y: 7.4, label: "15:00" },
      { x: 16, y: 5.1, label: "16:00" },
      { x: 17, y: 2.8, label: "17:00" },
      { x: 18, y: 1.2, label: "18:00" },
      { x: 19, y: 0.5, label: "19:00" },
      { x: 20, y: 0.2, label: "20:00" },
      { x: 21, y: 0.1, label: "21:00" },
      { x: 22, y: 0.1, label: "22:00" },
      { x: 23, y: 0.1, label: "23:00" },
    ],
    ariaLabel: "Rooftop solar generation in kilowatts by hour, 8 July 2026",
    tooltip: true,
    legend: false,
  };
 
  import { AreaChart } from "@grassroot/charts-svelte";
</script>
 
<AreaChart {...areaChartFixture} />

/** @jsxImportSource solid-js */
const areaChartFixture = {
  id: "area-chart",
  data: [
    { x: 0, y: 0.1, label: "00:00" },
    { x: 1, y: 0.1, label: "01:00" },
    { x: 2, y: 0.1, label: "02:00" },
    { x: 3, y: 0.1, label: "03:00" },
    { x: 4, y: 0.2, label: "04:00" },
    { x: 5, y: 0.4, label: "05:00" },
    { x: 6, y: 0.8, label: "06:00" },
    { x: 7, y: 2.1, label: "07:00" },
    { x: 8, y: 4.6, label: "08:00" },
    { x: 9, y: 6.8, label: "09:00" },
    { x: 10, y: 8.4, label: "10:00" },
    { x: 11, y: 9.6, label: "11:00" },
    { x: 12, y: 10.2, label: "12:00" },
    { x: 13, y: 9.7, label: "13:00" },
    { x: 14, y: 8.8, label: "14:00" },
    { x: 15, y: 7.4, label: "15:00" },
    { x: 16, y: 5.1, label: "16:00" },
    { x: 17, y: 2.8, label: "17:00" },
    { x: 18, y: 1.2, label: "18:00" },
    { x: 19, y: 0.5, label: "19:00" },
    { x: 20, y: 0.2, label: "20:00" },
    { x: 21, y: 0.1, label: "21:00" },
    { x: 22, y: 0.1, label: "22:00" },
    { x: 23, y: 0.1, label: "23:00" },
  ],
  ariaLabel: "Rooftop solar generation in kilowatts by hour, 8 July 2026",
  tooltip: true,
  legend: false,
};
 
import { AreaChart } from "@grassroot/charts-solid";
export default function AreaChartDemo() {
  return <AreaChart {...areaChartFixture} />;
}

Installation

API Reference

Import

import { AreaChart } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

Description

data

number[] | { x: number | Date | string; y: number | null | undefined; label?: string; }[]

—

required

—

labels

string[] | undefined

—

optional

—

max

number | undefined

—

optional

—

color

string | undefined

—

optional

—

layout

"linear" | "horizon" | undefined

—

optional

—

horizonBands

number | undefined

—

optional

—

xDomain

ChartNumericDomain | ChartTimeDomain | undefined

—

optional

—

yDomain

ChartNumericDomain | undefined

—

optional

—

xAxis

ChartAxisOptions<number | Date> | undefined

—

optional

—

yAxis

ChartAxisOptions<number> | undefined

—

optional

—

showGrid

boolean | undefined

—

optional

—

formatXTick

((value: number | Date, index: number) => string) | undefined

—

optional

—

formatYTick

((value: number, index: number) => string) | undefined

—

optional

—

formatXValue

((value: number, index: number) => string) | undefined

—

optional

—

Prop: data
Type: number[] | { x: number | Date | string; y: number | null | undefined; label?: string; }[]
Default: —
Requirement: required
Description: —

Prop: labels
Type: string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: max
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: color
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: layout
Type: "linear" | "horizon" | undefined
Default: —
Requirement: optional
Description: —

Prop: horizonBands
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: xDomain
Type: ChartNumericDomain | ChartTimeDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: yDomain
Type: ChartNumericDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: xAxis
Type: ChartAxisOptions<number | Date> | undefined
Default: —
Requirement: optional
Description: —

Prop: yAxis
Type: ChartAxisOptions<number> | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: formatXTick
Type: ((value: number | Date, index: number) => string) | undefined
Default: —
Requirement: optional
Description: —

Prop: formatYTick
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional
Description: —

Prop: formatXValue
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional
Description: —

Prop: formatYValue
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional
Description: —

Prop: locale
Type: string | readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: referenceLines
Type: readonly ReferenceLine[] | undefined
Default: —
Requirement: optional
Description: —

Prop: referenceBands
Type: readonly ReferenceBand[] | undefined
Default: —
Requirement: optional
Description: —

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in ms.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional
Description: —

Prop: selectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultSelectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: onSelectedIdsChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: brushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultBrushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: onBrushDomainChange
Type: ((domain: ChartXDomain) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: zoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultZoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional
Description: —

Prop: onZoomDomainChange
Type: ((domain: ChartXDomain) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: zoomOnBrush
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: import("@grassroot/core").ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: import("@grassroot/theme").ChartAnimationInput | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("../../types").TooltipConfig<PointDatum> | undefined
Default: —
Requirement: optional
Description: —

Prop: crosshair
Type: boolean | import("../../types").CrosshairConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: legend
Type: boolean | LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: activePoint
Type: ActivePoint<PointDatum> | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActivePoint
Type: ActivePoint<PointDatum> | null | undefined
Default: —
Requirement: optional
Description: —

Prop: onActivePointChange
Type: ((point: ActivePoint<PointDatum> | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((hidden: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Events

Event	Payload
`onSelectedIdsChange`	`((ids: readonly string[]) => void) \| undefined`
`onBrushDomainChange`	`((domain: ChartXDomain) => void) \| undefined`
`onZoomDomainChange`	`((domain: ChartXDomain) => void) \| undefined`
`onActivePointChange`	`((point: ActivePoint<PointDatum> \| null) => void) \| undefined`
`onHiddenSeriesChange`	`((hidden: readonly string[]) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { AreaChart } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

data

readonly PointDatum[]

—

required

labels

readonly string[] | undefined

—

optional

max

number | undefined

—

optional

color

string | undefined

—

optional

layout

"linear" | "horizon" | undefined

—

optional

horizonBands

number | undefined

—

optional

xDomain

readonly [number, number] | undefined

—

optional

yDomain

readonly [number, number] | undefined

—

optional

xAxis

ChartAxisOptions<number> | undefined

—

optional

yAxis

ChartAxisOptions<number> | undefined

—

optional

showGrid

boolean | undefined

false

optional

formatXTick

((value: number, index: number) => string) | undefined

—

optional

formatYTick

((value: number, index: number) => string) | undefined

—

optional

formatXValue

((value: number, index: number) => string) | undefined

—

optional

Prop: data
Type: readonly PointDatum[]
Default: —
Requirement: required

Prop: labels
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: max
Type: number | undefined
Default: —
Requirement: optional

Prop: color
Type: string | undefined
Default: —
Requirement: optional

Prop: layout
Type: "linear" | "horizon" | undefined
Default: —
Requirement: optional

Prop: horizonBands
Type: number | undefined
Default: —
Requirement: optional

Prop: xDomain
Type: readonly [number, number] | undefined
Default: —
Requirement: optional

Prop: yDomain
Type: readonly [number, number] | undefined
Default: —
Requirement: optional

Prop: xAxis
Type: ChartAxisOptions<number> | undefined
Default: —
Requirement: optional

Prop: yAxis
Type: ChartAxisOptions<number> | undefined
Default: —
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: false
Requirement: optional

Prop: formatXTick
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional

Prop: formatYTick
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional

Prop: formatXValue
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional

Prop: formatYValue
Type: ((value: number, index: number) => string) | undefined
Default: —
Requirement: optional

Prop: locale
Type: string | readonly string[] | undefined
Default: —
Requirement: optional

Prop: referenceLines
Type: readonly ReferenceLine[] | undefined
Default: —
Requirement: optional

Prop: referenceBands
Type: readonly ReferenceBand[] | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: crosshair
Type: boolean | CrosshairBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activePoint
Type: ActivePoint<PointDatum> | null | undefined
Default: —
Requirement: optional

Prop: defaultActivePoint
Type: ActivePoint<PointDatum> | null | undefined
Default: null
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain | undefined
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean | undefined
Default: false
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Events

Event	Payload
`activePointChange`	`[point: ActivePoint<PointDatum> \| null]`
`hiddenSeriesChange`	`[ids: readonly string[]]`
`selectedIdsChange`	`[ids: readonly string[]]`
`brushDomainChange`	`[domain: ChartXDomain]`
`zoomDomainChange`	`[domain: ChartXDomain]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootAreaChart } from "@grassroot/charts-angular";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: data
Type: readonly PointDatum[]
Default: —
Requirement: required

Prop: labels
Type: readonly string[]
Default: —
Requirement: optional

Prop: max
Type: number
Default: —
Requirement: optional

Prop: color
Type: string
Default: —
Requirement: optional

Prop: layout
Type: AreaChartOptions["layout"]
Default: —
Requirement: optional

Prop: horizonBands
Type: number
Default: —
Requirement: optional

Prop: xDomain
Type: readonly [number, number]
Default: —
Requirement: optional

Prop: yDomain
Type: readonly [number, number]
Default: —
Requirement: optional

Prop: xAxis
Type: ChartAxisOptions<number>
Default: —
Requirement: optional

Prop: yAxis
Type: ChartAxisOptions<number>
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: false
Requirement: optional

Prop: formatXTick
Type: AreaChartOptions["formatXTick"]
Default: —
Requirement: optional

Prop: formatYTick
Type: AreaChartOptions["formatYTick"]
Default: —
Requirement: optional

Prop: formatXValue
Type: AreaChartOptions["formatXValue"]
Default: —
Requirement: optional

Prop: formatYValue
Type: AreaChartOptions["formatYValue"]
Default: —
Requirement: optional

Prop: locale
Type: AreaChartOptions["locale"]
Default: —
Requirement: optional

Prop: referenceLines
Type: AreaChartOptions["referenceLines"]
Default: —
Requirement: optional

Prop: referenceBands
Type: AreaChartOptions["referenceBands"]
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: SelectionValue) => void
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: onBrushDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain
Default: null
Requirement: optional

Prop: onZoomDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean
Default: false
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Prop: crosshair
Type: boolean | CrosshairBehaviorConfig
Default: true
Requirement: optional

Prop: activePoint
Type: ActivePoint<PointDatum> | null
Default: —
Requirement: optional

Prop: defaultActivePoint
Type: ActivePoint<PointDatum> | null
Default: null
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`selectedIdsChange`	`readonly string[]`
`brushDomainChange`	`ChartXDomain`
`zoomDomainChange`	`ChartXDomain`
`activePointChange`	`ActivePoint<PointDatum> \| null`

Content regions

dataSummary
default

Import

import { AreaChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

data

readonly PointDatum[]

—

required

labels

readonly string[]

—

optional

max

number

—

optional

color

string

—

optional

layout

AreaChartOptions["layout"]

—

optional

horizonBands

number

—

optional

xDomain

readonly [number, number]

—

optional

yDomain

readonly [number, number]

—

optional

xAxis

AreaChartOptions["xAxis"]

—

optional

yAxis

AreaChartOptions["yAxis"]

—

optional

showGrid

boolean

false

optional

formatXTick

AreaChartOptions["formatXTick"]

—

optional

formatYTick

AreaChartOptions["formatYTick"]

—

optional

formatXValue

AreaChartOptions["formatXValue"]

—

optional

Prop: data
Type: readonly PointDatum[]
Default: —
Requirement: required

Prop: labels
Type: readonly string[]
Default: —
Requirement: optional

Prop: max
Type: number
Default: —
Requirement: optional

Prop: color
Type: string
Default: —
Requirement: optional

Prop: layout
Type: AreaChartOptions["layout"]
Default: —
Requirement: optional

Prop: horizonBands
Type: number
Default: —
Requirement: optional

Prop: xDomain
Type: readonly [number, number]
Default: —
Requirement: optional

Prop: yDomain
Type: readonly [number, number]
Default: —
Requirement: optional

Prop: xAxis
Type: AreaChartOptions["xAxis"]
Default: —
Requirement: optional

Prop: yAxis
Type: AreaChartOptions["yAxis"]
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: false
Requirement: optional

Prop: formatXTick
Type: AreaChartOptions["formatXTick"]
Default: —
Requirement: optional

Prop: formatYTick
Type: AreaChartOptions["formatYTick"]
Default: —
Requirement: optional

Prop: formatXValue
Type: AreaChartOptions["formatXValue"]
Default: —
Requirement: optional

Prop: formatYValue
Type: AreaChartOptions["formatYValue"]
Default: —
Requirement: optional

Prop: locale
Type: AreaChartOptions["locale"]
Default: —
Requirement: optional

Prop: referenceLines
Type: AreaChartOptions["referenceLines"]
Default: —
Requirement: optional

Prop: referenceBands
Type: AreaChartOptions["referenceBands"]
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: SelectionValue) => void
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: onBrushDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain
Default: null
Requirement: optional

Prop: onZoomDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean
Default: false
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: crosshair
Type: boolean | CrosshairBehaviorConfig
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: activePoint
Type: ActivePoint<PointDatum> | null
Default: —
Requirement: optional

Prop: defaultActivePoint
Type: ActivePoint<PointDatum> | null
Default: null
Requirement: optional

Prop: onActivePointChange
Type: (point: ActivePoint<PointDatum> | null) => void
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(ids: SelectionValue) => void`
`onBrushDomainChange`	`(domain: ChartXDomain) => void`
`onZoomDomainChange`	`(domain: ChartXDomain) => void`
`onActivePointChange`	`(point: ActivePoint<PointDatum> \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary

Import

import { AreaChart } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

data

readonly PointDatum[]

—

required

labels

readonly string[]

—

optional

max

number

—

optional

color

string

—

optional

layout

AreaChartOptions["layout"]

—

optional

horizonBands

number

—

optional

xDomain

readonly [number, number]

—

optional

yDomain

readonly [number, number]

—

optional

xAxis

ChartAxisOptions<number>

—

optional

yAxis

ChartAxisOptions<number>

—

optional

showGrid

boolean

false

optional

formatXTick

(value: number, index: number) => string

—

optional

formatYTick

(value: number, index: number) => string

—

optional

formatXValue

AreaChartOptions["formatXValue"]

—

optional

Prop: data
Type: readonly PointDatum[]
Default: —
Requirement: required

Prop: labels
Type: readonly string[]
Default: —
Requirement: optional

Prop: max
Type: number
Default: —
Requirement: optional

Prop: color
Type: string
Default: —
Requirement: optional

Prop: layout
Type: AreaChartOptions["layout"]
Default: —
Requirement: optional

Prop: horizonBands
Type: number
Default: —
Requirement: optional

Prop: xDomain
Type: readonly [number, number]
Default: —
Requirement: optional

Prop: yDomain
Type: readonly [number, number]
Default: —
Requirement: optional

Prop: xAxis
Type: ChartAxisOptions<number>
Default: —
Requirement: optional

Prop: yAxis
Type: ChartAxisOptions<number>
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: false
Requirement: optional

Prop: formatXTick
Type: (value: number, index: number) => string
Default: —
Requirement: optional

Prop: formatYTick
Type: (value: number, index: number) => string
Default: —
Requirement: optional

Prop: formatXValue
Type: AreaChartOptions["formatXValue"]
Default: —
Requirement: optional

Prop: formatYValue
Type: AreaChartOptions["formatYValue"]
Default: —
Requirement: optional

Prop: locale
Type: AreaChartOptions["locale"]
Default: —
Requirement: optional

Prop: referenceLines
Type: AreaChartOptions["referenceLines"]
Default: —
Requirement: optional

Prop: referenceBands
Type: AreaChartOptions["referenceBands"]
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: crosshair
Type: boolean | CrosshairBehaviorConfig
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: activePoint
Type: ActivePoint<PointDatum> | null
Default: —
Requirement: optional

Prop: defaultActivePoint
Type: ActivePoint<PointDatum> | null
Default: null
Requirement: optional

Prop: onActivePointChange
Type: (point: ActivePoint<PointDatum> | null) => void
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: brushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: onBrushDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomDomain
Type: ChartXDomain
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: ChartXDomain
Default: null
Requirement: optional

Prop: onZoomDomainChange
Type: (domain: ChartXDomain) => void
Default: —
Requirement: optional

Prop: zoomOnBrush
Type: boolean
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Events

Event	Payload
`onActivePointChange`	`(point: ActivePoint<PointDatum> \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onSelectedIdsChange`	`(ids: readonly string[]) => void`
`onBrushDomainChange`	`(domain: ChartXDomain) => void`
`onZoomDomainChange`	`(domain: ChartXDomain) => void`

Content regions

children
dataSummary