Docs Charts Distribution

DensityChart

import { DensityChart } from "@grassroot/charts-react";
 
const distribution = [
  {
    label: "Checkout API",
    values: [
      91, 99, 103, 104, 120, 128, 128, 130, 133, 134,
      135, 141, 141, 145, 146, 149, 149, 155, 157, 157,
      168, 169, 175, 178, 186, 196, 198, 202, 204, 205,
      206, 207, 210, 213, 220, 221, 226, 232, 233, 240,
      242, 360,
    ],
    color: "var(--accent)",
  },
  {
    label: "Search service",
    values: [
      47, 47, 55, 58, 61, 65, 77, 77, 78, 78,
      81, 83, 84, 84, 85, 85, 86, 88, 90, 92,
      93, 96, 97, 98, 99, 100, 103, 106, 108, 108,
      109, 113, 114, 114, 115, 117, 120, 124, 128, 133,
      137, 203,
    ],
    color: "var(--vs-success)",
  },
  {
    label: "Payments worker",
    values: [
      120, 160, 177, 183, 184, 186, 188, 188, 191, 191,
      194, 194, 200, 200, 203, 204, 217, 223, 227, 232,
      236, 240, 241, 248, 250, 253, 254, 259, 259, 266,
      267, 270, 271, 275, 283, 293, 305, 311, 313, 353,
      380, 490,
    ],
    color: "var(--vs-info)",
  },
  {
    label: "Identity API",
    values: [
      78, 79, 90, 95, 104, 105, 106, 106, 107, 113,
      113, 114, 115, 115, 116, 117, 118, 118, 120, 120,
      124, 124, 124, 126, 127, 132, 133, 137, 137, 138,
      143, 146, 149, 150, 154, 160, 173, 178, 233, 253,
    ],
    color: "var(--vs-warning)",
  },
  {
    label: "Inventory service",
    values: [
      109, 124, 128, 133, 150, 156, 160, 160, 169, 172,
      173, 177, 179, 179, 185, 186, 191, 192, 192, 192,
      194, 197, 198, 198, 199, 201, 212, 212, 213, 221,
      228, 229, 243, 251, 251, 274, 277, 280, 314, 353,
    ],
    color: "var(--vs-error)",
  },
];
 
export default function DensityChartDemo() {
  return (
    <div>
      <DensityChart
        series={distribution}
        ariaLabel="Density estimate of request latency in milliseconds for five production services, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { DensityChart } from "@grassroot/charts-vue";
 
const distribution = [
  {
    label: "Checkout API",
    values: [
      91, 99, 103, 104, 120, 128, 128, 130, 133, 134,
      135, 141, 141, 145, 146, 149, 149, 155, 157, 157,
      168, 169, 175, 178, 186, 196, 198, 202, 204, 205,
      206, 207, 210, 213, 220, 221, 226, 232, 233, 240,
      242, 360,
    ],
    color: "var(--accent)",
  },
  {
    label: "Search service",
    values: [
      47, 47, 55, 58, 61, 65, 77, 77, 78, 78,
      81, 83, 84, 84, 85, 85, 86, 88, 90, 92,
      93, 96, 97, 98, 99, 100, 103, 106, 108, 108,
      109, 113, 114, 114, 115, 117, 120, 124, 128, 133,
      137, 203,
    ],
    color: "var(--vs-success)",
  },
  {
    label: "Payments worker",
    values: [
      120, 160, 177, 183, 184, 186, 188, 188, 191, 191,
      194, 194, 200, 200, 203, 204, 217, 223, 227, 232,
      236, 240, 241, 248, 250, 253, 254, 259, 259, 266,
      267, 270, 271, 275, 283, 293, 305, 311, 313, 353,
      380, 490,
    ],
    color: "var(--vs-info)",
  },
  {
    label: "Identity API",
    values: [
      78, 79, 90, 95, 104, 105, 106, 106, 107, 113,
      113, 114, 115, 115, 116, 117, 118, 118, 120, 120,
      124, 124, 124, 126, 127, 132, 133, 137, 137, 138,
      143, 146, 149, 150, 154, 160, 173, 178, 233, 253,
    ],
    color: "var(--vs-warning)",
  },
  {
    label: "Inventory service",
    values: [
      109, 124, 128, 133, 150, 156, 160, 160, 169, 172,
      173, 177, 179, 179, 185, 186, 191, 192, 192, 192,
      194, 197, 198, 198, 199, 201, 212, 212, 213, 221,
      228, 229, 243, 251, 251, 274, 277, 280, 314, 353,
    ],
    color: "var(--vs-error)",
  },
];
</script>
 
<template>
  <DensityChart
    :series="distribution"
    aria-label="Density estimate of request latency in milliseconds for five production services, July 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDensityChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-density-chart-chart-demo",
  standalone: true,
  imports: [GrassrootDensityChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-density-chart
    [series]="distribution"
    ariaLabel="Density estimate of request latency in milliseconds for five production services, July 2026"
  />`,
})
export class DensityChartDemoComponent {
  readonly distribution = [
    {
      label: "Checkout API",
      values: [
        91, 99, 103, 104, 120, 128, 128, 130, 133, 134,
        135, 141, 141, 145, 146, 149, 149, 155, 157, 157,
        168, 169, 175, 178, 186, 196, 198, 202, 204, 205,
        206, 207, 210, 213, 220, 221, 226, 232, 233, 240,
        242, 360,
      ],
      color: "var(--accent)",
    },
    {
      label: "Search service",
      values: [
        47, 47, 55, 58, 61, 65, 77, 77, 78, 78,
        81, 83, 84, 84, 85, 85, 86, 88, 90, 92,
        93, 96, 97, 98, 99, 100, 103, 106, 108, 108,
        109, 113, 114, 114, 115, 117, 120, 124, 128, 133,
        137, 203,
      ],
      color: "var(--vs-success)",
    },
    {
      label: "Payments worker",
      values: [
        120, 160, 177, 183, 184, 186, 188, 188, 191, 191,
        194, 194, 200, 200, 203, 204, 217, 223, 227, 232,
        236, 240, 241, 248, 250, 253, 254, 259, 259, 266,
        267, 270, 271, 275, 283, 293, 305, 311, 313, 353,
        380, 490,
      ],
      color: "var(--vs-info)",
    },
    {
      label: "Identity API",
      values: [
        78, 79, 90, 95, 104, 105, 106, 106, 107, 113,
        113, 114, 115, 115, 116, 117, 118, 118, 120, 120,
        124, 124, 124, 126, 127, 132, 133, 137, 137, 138,
        143, 146, 149, 150, 154, 160, 173, 178, 233, 253,
      ],
      color: "var(--vs-warning)",
    },
    {
      label: "Inventory service",
      values: [
        109, 124, 128, 133, 150, 156, 160, 160, 169, 172,
        173, 177, 179, 179, 185, 186, 191, 192, 192, 192,
        194, 197, 198, 198, 199, 201, 212, 212, 213, 221,
        228, 229, 243, 251, 251, 274, 277, 280, 314, 353,
      ],
      color: "var(--vs-error)",
    },
  ];
}
 
export default DensityChartDemoComponent;

<script lang="ts">
  import { DensityChart } from "@grassroot/charts-svelte";
 
  const distribution = [
    {
      label: "Checkout API",
      values: [
        91, 99, 103, 104, 120, 128, 128, 130, 133, 134,
        135, 141, 141, 145, 146, 149, 149, 155, 157, 157,
        168, 169, 175, 178, 186, 196, 198, 202, 204, 205,
        206, 207, 210, 213, 220, 221, 226, 232, 233, 240,
        242, 360,
      ],
      color: "var(--accent)",
    },
    {
      label: "Search service",
      values: [
        47, 47, 55, 58, 61, 65, 77, 77, 78, 78,
        81, 83, 84, 84, 85, 85, 86, 88, 90, 92,
        93, 96, 97, 98, 99, 100, 103, 106, 108, 108,
        109, 113, 114, 114, 115, 117, 120, 124, 128, 133,
        137, 203,
      ],
      color: "var(--vs-success)",
    },
    {
      label: "Payments worker",
      values: [
        120, 160, 177, 183, 184, 186, 188, 188, 191, 191,
        194, 194, 200, 200, 203, 204, 217, 223, 227, 232,
        236, 240, 241, 248, 250, 253, 254, 259, 259, 266,
        267, 270, 271, 275, 283, 293, 305, 311, 313, 353,
        380, 490,
      ],
      color: "var(--vs-info)",
    },
    {
      label: "Identity API",
      values: [
        78, 79, 90, 95, 104, 105, 106, 106, 107, 113,
        113, 114, 115, 115, 116, 117, 118, 118, 120, 120,
        124, 124, 124, 126, 127, 132, 133, 137, 137, 138,
        143, 146, 149, 150, 154, 160, 173, 178, 233, 253,
      ],
      color: "var(--vs-warning)",
    },
    {
      label: "Inventory service",
      values: [
        109, 124, 128, 133, 150, 156, 160, 160, 169, 172,
        173, 177, 179, 179, 185, 186, 191, 192, 192, 192,
        194, 197, 198, 198, 199, 201, 212, 212, 213, 221,
        228, 229, 243, 251, 251, 274, 277, 280, 314, 353,
      ],
      color: "var(--vs-error)",
    },
  ];
</script>
 
<DensityChart
  series={distribution}
  ariaLabel="Density estimate of request latency in milliseconds for five production services, July 2026" />

/** @jsxImportSource solid-js */
import { DensityChart } from "@grassroot/charts-solid";
 
const distribution = [
  {
    label: "Checkout API",
    values: [
      91, 99, 103, 104, 120, 128, 128, 130, 133, 134,
      135, 141, 141, 145, 146, 149, 149, 155, 157, 157,
      168, 169, 175, 178, 186, 196, 198, 202, 204, 205,
      206, 207, 210, 213, 220, 221, 226, 232, 233, 240,
      242, 360,
    ],
    color: "var(--accent)",
  },
  {
    label: "Search service",
    values: [
      47, 47, 55, 58, 61, 65, 77, 77, 78, 78,
      81, 83, 84, 84, 85, 85, 86, 88, 90, 92,
      93, 96, 97, 98, 99, 100, 103, 106, 108, 108,
      109, 113, 114, 114, 115, 117, 120, 124, 128, 133,
      137, 203,
    ],
    color: "var(--vs-success)",
  },
  {
    label: "Payments worker",
    values: [
      120, 160, 177, 183, 184, 186, 188, 188, 191, 191,
      194, 194, 200, 200, 203, 204, 217, 223, 227, 232,
      236, 240, 241, 248, 250, 253, 254, 259, 259, 266,
      267, 270, 271, 275, 283, 293, 305, 311, 313, 353,
      380, 490,
    ],
    color: "var(--vs-info)",
  },
  {
    label: "Identity API",
    values: [
      78, 79, 90, 95, 104, 105, 106, 106, 107, 113,
      113, 114, 115, 115, 116, 117, 118, 118, 120, 120,
      124, 124, 124, 126, 127, 132, 133, 137, 137, 138,
      143, 146, 149, 150, 154, 160, 173, 178, 233, 253,
    ],
    color: "var(--vs-warning)",
  },
  {
    label: "Inventory service",
    values: [
      109, 124, 128, 133, 150, 156, 160, 160, 169, 172,
      173, 177, 179, 179, 185, 186, 191, 192, 192, 192,
      194, 197, 198, 198, 199, 201, 212, 212, 213, 221,
      228, 229, 243, 251, 251, 274, 277, 280, 314, 353,
    ],
    color: "var(--vs-error)",
  },
];
 
export default function DensityChartDemo() {
  return (
    <DensityChart
      series={distribution}
      ariaLabel="Density estimate of request latency in milliseconds for five production services, July 2026" />
  );
}

Installation

API Reference

Import

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

Props

Prop

Type

Default

Requirement

Description

series

readonly DistributionSeries[]

—

required

—

brushDomain

ChartXDomain | undefined

—

optional

—

defaultBrushDomain

ChartXDomain | undefined

—

optional

—

onBrushDomainChange

((domain: ChartXDomain) => void) | undefined

—

optional

—

zoomDomain

ChartXDomain | undefined

—

optional

—

defaultZoomDomain

ChartXDomain | undefined

—

optional

—

onZoomDomainChange

((domain: ChartXDomain) => void) | undefined

—

optional

—

zoomOnBrush

boolean | undefined

—

optional

—

formatXValue

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

—

optional

—

formatYValue

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

—

optional

—

locale

string | readonly string[] | undefined

—

optional

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

Prop: series
Type: readonly DistributionSeries[]
Default: —
Requirement: required
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: 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: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

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

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: 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: 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: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

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

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

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

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

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

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

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

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

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 milliseconds.

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

Events

Event	Payload
`onBrushDomainChange`	`((domain: ChartXDomain) => void) \| undefined`
`onZoomDomainChange`	`((domain: ChartXDomain) => void) \| undefined`
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

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

Import

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

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

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

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
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

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

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

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

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

Prop: series
Type: readonly DistributionSeries[]
Default: —
Requirement: required

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: 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

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`
`brushDomainChange`	`[domain: ChartXDomain]`
`zoomDomainChange`	`[domain: ChartXDomain]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDensityChart } 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: brushDomain
Type: ChartXDomain
Default: —
Requirement: optional

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

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

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

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

Prop: series
Type: readonly DistributionSeries[]
Default: —
Requirement: required

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

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

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

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

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

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

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

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`brushDomainChange`	`ChartXDomain`
`zoomDomainChange`	`ChartXDomain`

Content regions

dataSummary
default

Import

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

Props

Prop

Type

Default

Requirement

series

readonly DistributionSeries[]

—

required

formatXValue

DistributionShapeChartOptions["formatXValue"]

—

optional

formatYValue

DistributionShapeChartOptions["formatYValue"]

—

optional

locale

DistributionShapeChartOptions["locale"]

—

optional

brushDomain

{ readonly start: number; readonly end: number } | null

—

optional

defaultBrushDomain

{ readonly start: number; readonly end: number } | null

—

optional

onBrushDomainChange

(domain: { readonly start: number; readonly end: number } | null) => void

—

optional

zoomDomain

{ readonly start: number; readonly end: number } | null

—

optional

defaultZoomDomain

{ readonly start: number; readonly end: number } | null

null

optional

onZoomDomainChange

(domain: { readonly start: number; readonly end: number } | null) => void

—

optional

zoomOnBrush

boolean

false

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

Prop: series
Type: readonly DistributionSeries[]
Default: —
Requirement: required

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

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

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

Prop: brushDomain
Type: { readonly start: number; readonly end: number } | null
Default: —
Requirement: optional

Prop: defaultBrushDomain
Type: { readonly start: number; readonly end: number } | null
Default: —
Requirement: optional

Prop: onBrushDomainChange
Type: (domain: { readonly start: number; readonly end: number } | null) => void
Default: —
Requirement: optional

Prop: zoomDomain
Type: { readonly start: number; readonly end: number } | null
Default: —
Requirement: optional

Prop: defaultZoomDomain
Type: { readonly start: number; readonly end: number } | null
Default: null
Requirement: optional

Prop: onZoomDomainChange
Type: (domain: { readonly start: number; readonly end: number } | null) => void
Default: —
Requirement: optional

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

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

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

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

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

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

Prop: height
Type: number
Default: —
Requirement: 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: showGrid
Type: boolean
Default: —
Requirement: optional

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

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
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: 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: —
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: theme
Type: PartialChartTheme
Default: —
Requirement: optional

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

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

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

Events

Event	Payload
`onBrushDomainChange`	`(domain: { readonly start: number; readonly end: number } \| null) => void`
`onZoomDomainChange`	`(domain: { readonly start: number; readonly end: number } \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

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

Props

Prop

Type

Default

Requirement

series

readonly DistributionSeries[]

—

required

formatXValue

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

—

optional

formatYValue

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

—

optional

locale

string | readonly string[]

—

optional

brushDomain

ChartXDomain

—

optional

defaultBrushDomain

ChartXDomain

—

optional

onBrushDomainChange

(domain: ChartXDomain) => void

—

optional

zoomDomain

ChartXDomain

—

optional

defaultZoomDomain

ChartXDomain

—

optional

onZoomDomainChange

(domain: ChartXDomain) => void

—

optional

zoomOnBrush

boolean

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

Prop: series
Type: readonly DistributionSeries[]
Default: —
Requirement: required

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

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

Prop: locale
Type: string | readonly string[]
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: —
Requirement: optional

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

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

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

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

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

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

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

Prop: height
Type: number
Default: —
Requirement: 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: —
Requirement: optional

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

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

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

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

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

Prop: keyboardNavigation
Type: boolean
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: —
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: theme
Type: PartialChartTheme
Default: —
Requirement: optional

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

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

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

Events

Event	Payload
`onBrushDomainChange`	`(domain: ChartXDomain) => void`
`onZoomDomainChange`	`(domain: ChartXDomain) => void`
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary