Docs Charts Cartesian & statistical

HistogramChart

import { HistogramChart } from "@grassroot/charts-react";
 
export default function HistogramChartDemo() {
  return (
    <div>
      <HistogramChart
        values={[
          6.8, 7.1, 7.2, 7.4, 7.4, 7.8, 7.8, 7.8, 7.9, 8,
          8, 8.1, 8.2, 8.3, 8.4, 8.5, 9, 9.3, 9.3, 9.3,
          9.3, 9.4, 9.4, 9.5, 9.5, 10, 10, 10, 10, 10.1,
          10.1, 10.2, 10.2, 10.2, 10.3, 10.3, 10.5, 10.6, 10.7, 10.7,
          10.7, 10.7, 10.7, 10.7, 10.8, 10.9, 10.9, 11, 11, 11.1,
          11.1, 11.1, 11.1, 11.2, 11.2, 11.3, 11.3, 11.4, 11.4, 11.4,
          11.4, 11.5, 11.5, 11.5, 11.6, 11.7, 11.7, 11.8, 11.8, 11.8,
          11.8, 11.9, 12, 12, 12, 12, 12, 12.1, 12.1, 12.1,
          12.2, 12.3, 12.3, 12.3, 12.4, 12.4, 12.4, 12.4, 12.4, 12.5,
          12.5, 12.5, 12.5, 12.6, 12.6, 12.6, 12.7, 12.8, 12.8, 12.9,
          13, 13, 13.1, 13.1, 13.2, 13.2, 13.2, 13.2, 13.3, 13.3,
          13.4, 13.5, 13.6, 13.7, 13.7, 13.7, 13.9, 14, 14, 14,
          14.1, 14.1, 14.1, 14.1, 14.2, 14.2, 14.2, 14.3, 14.3, 14.3,
          14.4, 14.5, 14.6, 14.6, 14.6, 14.7, 14.7, 14.7, 14.7, 14.8,
          14.9, 15, 15.2, 15.2, 15.4, 15.5, 15.5, 15.6, 15.9, 15.9,
          16.2, 16.4, 16.6, 16.8, 18.2, 19, 19.5, 20.7, 21.2, 21.2,
        ]}
        ariaLabel="Distribution of 160 Leeds warehouse order-picking times in minutes, July 2026" />
    </div>
  );
}

<script setup lang="ts">
import { HistogramChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <HistogramChart
    :values="[
      6.8, 7.1, 7.2, 7.4, 7.4, 7.8, 7.8, 7.8, 7.9, 8,
      8, 8.1, 8.2, 8.3, 8.4, 8.5, 9, 9.3, 9.3, 9.3,
      9.3, 9.4, 9.4, 9.5, 9.5, 10, 10, 10, 10, 10.1,
      10.1, 10.2, 10.2, 10.2, 10.3, 10.3, 10.5, 10.6, 10.7, 10.7,
      10.7, 10.7, 10.7, 10.7, 10.8, 10.9, 10.9, 11, 11, 11.1,
      11.1, 11.1, 11.1, 11.2, 11.2, 11.3, 11.3, 11.4, 11.4, 11.4,
      11.4, 11.5, 11.5, 11.5, 11.6, 11.7, 11.7, 11.8, 11.8, 11.8,
      11.8, 11.9, 12, 12, 12, 12, 12, 12.1, 12.1, 12.1,
      12.2, 12.3, 12.3, 12.3, 12.4, 12.4, 12.4, 12.4, 12.4, 12.5,
      12.5, 12.5, 12.5, 12.6, 12.6, 12.6, 12.7, 12.8, 12.8, 12.9,
      13, 13, 13.1, 13.1, 13.2, 13.2, 13.2, 13.2, 13.3, 13.3,
      13.4, 13.5, 13.6, 13.7, 13.7, 13.7, 13.9, 14, 14, 14,
      14.1, 14.1, 14.1, 14.1, 14.2, 14.2, 14.2, 14.3, 14.3, 14.3,
      14.4, 14.5, 14.6, 14.6, 14.6, 14.7, 14.7, 14.7, 14.7, 14.8,
      14.9, 15, 15.2, 15.2, 15.4, 15.5, 15.5, 15.6, 15.9, 15.9,
      16.2, 16.4, 16.6, 16.8, 18.2, 19, 19.5, 20.7, 21.2, 21.2,
    ]"
    aria-label="Distribution of 160 Leeds warehouse order-picking times in minutes, July 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootHistogramChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-histogram-chart-chart-demo",
  standalone: true,
  imports: [GrassrootHistogramChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-histogram-chart
    [values]="[
      6.8, 7.1, 7.2, 7.4, 7.4, 7.8, 7.8, 7.8, 7.9, 8,
      8, 8.1, 8.2, 8.3, 8.4, 8.5, 9, 9.3, 9.3, 9.3,
      9.3, 9.4, 9.4, 9.5, 9.5, 10, 10, 10, 10, 10.1,
      10.1, 10.2, 10.2, 10.2, 10.3, 10.3, 10.5, 10.6, 10.7, 10.7,
      10.7, 10.7, 10.7, 10.7, 10.8, 10.9, 10.9, 11, 11, 11.1,
      11.1, 11.1, 11.1, 11.2, 11.2, 11.3, 11.3, 11.4, 11.4, 11.4,
      11.4, 11.5, 11.5, 11.5, 11.6, 11.7, 11.7, 11.8, 11.8, 11.8,
      11.8, 11.9, 12, 12, 12, 12, 12, 12.1, 12.1, 12.1,
      12.2, 12.3, 12.3, 12.3, 12.4, 12.4, 12.4, 12.4, 12.4, 12.5,
      12.5, 12.5, 12.5, 12.6, 12.6, 12.6, 12.7, 12.8, 12.8, 12.9,
      13, 13, 13.1, 13.1, 13.2, 13.2, 13.2, 13.2, 13.3, 13.3,
      13.4, 13.5, 13.6, 13.7, 13.7, 13.7, 13.9, 14, 14, 14,
      14.1, 14.1, 14.1, 14.1, 14.2, 14.2, 14.2, 14.3, 14.3, 14.3,
      14.4, 14.5, 14.6, 14.6, 14.6, 14.7, 14.7, 14.7, 14.7, 14.8,
      14.9, 15, 15.2, 15.2, 15.4, 15.5, 15.5, 15.6, 15.9, 15.9,
      16.2, 16.4, 16.6, 16.8, 18.2, 19, 19.5, 20.7, 21.2, 21.2,
    ]"
    ariaLabel="Distribution of 160 Leeds warehouse order-picking times in minutes, July 2026"
  />`,
})
export class HistogramChartDemoComponent {
}
 
export default HistogramChartDemoComponent;

<script lang="ts">
  import { HistogramChart } from "@grassroot/charts-svelte";
</script>
 
<HistogramChart
  values={[
    6.8, 7.1, 7.2, 7.4, 7.4, 7.8, 7.8, 7.8, 7.9, 8,
    8, 8.1, 8.2, 8.3, 8.4, 8.5, 9, 9.3, 9.3, 9.3,
    9.3, 9.4, 9.4, 9.5, 9.5, 10, 10, 10, 10, 10.1,
    10.1, 10.2, 10.2, 10.2, 10.3, 10.3, 10.5, 10.6, 10.7, 10.7,
    10.7, 10.7, 10.7, 10.7, 10.8, 10.9, 10.9, 11, 11, 11.1,
    11.1, 11.1, 11.1, 11.2, 11.2, 11.3, 11.3, 11.4, 11.4, 11.4,
    11.4, 11.5, 11.5, 11.5, 11.6, 11.7, 11.7, 11.8, 11.8, 11.8,
    11.8, 11.9, 12, 12, 12, 12, 12, 12.1, 12.1, 12.1,
    12.2, 12.3, 12.3, 12.3, 12.4, 12.4, 12.4, 12.4, 12.4, 12.5,
    12.5, 12.5, 12.5, 12.6, 12.6, 12.6, 12.7, 12.8, 12.8, 12.9,
    13, 13, 13.1, 13.1, 13.2, 13.2, 13.2, 13.2, 13.3, 13.3,
    13.4, 13.5, 13.6, 13.7, 13.7, 13.7, 13.9, 14, 14, 14,
    14.1, 14.1, 14.1, 14.1, 14.2, 14.2, 14.2, 14.3, 14.3, 14.3,
    14.4, 14.5, 14.6, 14.6, 14.6, 14.7, 14.7, 14.7, 14.7, 14.8,
    14.9, 15, 15.2, 15.2, 15.4, 15.5, 15.5, 15.6, 15.9, 15.9,
    16.2, 16.4, 16.6, 16.8, 18.2, 19, 19.5, 20.7, 21.2, 21.2,
  ]}
  ariaLabel="Distribution of 160 Leeds warehouse order-picking times in minutes, July 2026" />

/** @jsxImportSource solid-js */
import { HistogramChart } from "@grassroot/charts-solid";
 
export default function HistogramChartDemo() {
  return (
    <HistogramChart
      values={[
        6.8, 7.1, 7.2, 7.4, 7.4, 7.8, 7.8, 7.8, 7.9, 8,
        8, 8.1, 8.2, 8.3, 8.4, 8.5, 9, 9.3, 9.3, 9.3,
        9.3, 9.4, 9.4, 9.5, 9.5, 10, 10, 10, 10, 10.1,
        10.1, 10.2, 10.2, 10.2, 10.3, 10.3, 10.5, 10.6, 10.7, 10.7,
        10.7, 10.7, 10.7, 10.7, 10.8, 10.9, 10.9, 11, 11, 11.1,
        11.1, 11.1, 11.1, 11.2, 11.2, 11.3, 11.3, 11.4, 11.4, 11.4,
        11.4, 11.5, 11.5, 11.5, 11.6, 11.7, 11.7, 11.8, 11.8, 11.8,
        11.8, 11.9, 12, 12, 12, 12, 12, 12.1, 12.1, 12.1,
        12.2, 12.3, 12.3, 12.3, 12.4, 12.4, 12.4, 12.4, 12.4, 12.5,
        12.5, 12.5, 12.5, 12.6, 12.6, 12.6, 12.7, 12.8, 12.8, 12.9,
        13, 13, 13.1, 13.1, 13.2, 13.2, 13.2, 13.2, 13.3, 13.3,
        13.4, 13.5, 13.6, 13.7, 13.7, 13.7, 13.9, 14, 14, 14,
        14.1, 14.1, 14.1, 14.1, 14.2, 14.2, 14.2, 14.3, 14.3, 14.3,
        14.4, 14.5, 14.6, 14.6, 14.6, 14.7, 14.7, 14.7, 14.7, 14.8,
        14.9, 15, 15.2, 15.2, 15.4, 15.5, 15.5, 15.6, 15.9, 15.9,
        16.2, 16.4, 16.6, 16.8, 18.2, 19, 19.5, 20.7, 21.2, 21.2,
      ]}
      ariaLabel="Distribution of 160 Leeds warehouse order-picking times in minutes, July 2026" />
  );
}

Installation

API Reference

Import

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

Props

Prop

Type

Default

Requirement

Description

values

readonly number[] | undefined

—

optional

—

bins

readonly HistogramBin[] | undefined

—

optional

—

binCount

number | undefined

—

optional

—

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

—

Prop: values
Type: readonly number[] | undefined
Default: —
Requirement: optional
Description: —

Prop: bins
Type: readonly HistogramBin[] | undefined
Default: —
Requirement: optional
Description: —

Prop: binCount
Type: number | 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: 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 { HistogramChart } 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

false

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: false
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: values
Type: readonly number[] | undefined
Default: —
Requirement: optional

Prop: bins
Type: readonly HistogramBin[] | undefined
Default: —
Requirement: optional

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

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

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

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

Prop: formatXTick
Type: ((value: string, 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: 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 { GrassrootHistogramChart } 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: values
Type: readonly number[]
Default: []
Requirement: optional

Prop: bins
Type: readonly HistogramBin[]
Default: —
Requirement: optional

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

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

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

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

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

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

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

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

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

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

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

Prop: showGrid
Type: boolean
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 { HistogramChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

values

readonly number[]

—

optional

bins

readonly HistogramBin[]

—

optional

binCount

number

—

optional

color

string

—

optional

max

number

—

optional

yDomain

readonly [number, number]

—

optional

formatXTick

HistogramChartOptions["formatXTick"]

—

optional

formatYTick

HistogramChartOptions["formatYTick"]

—

optional

formatXValue

HistogramChartOptions["formatXValue"]

—

optional

formatYValue

HistogramChartOptions["formatYValue"]

—

optional

locale

HistogramChartOptions["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

Prop: values
Type: readonly number[]
Default: —
Requirement: optional

Prop: bins
Type: readonly HistogramBin[]
Default: —
Requirement: optional

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

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

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

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

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

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

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

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

Prop: locale
Type: HistogramChartOptions["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: false
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 { HistogramChart } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

values

readonly number[]

—

optional

bins

readonly HistogramBin[]

—

optional

binCount

number

—

optional

color

string

—

optional

max

number

—

optional

yDomain

readonly [number, number]

—

optional

formatXTick

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

—

optional

formatYTick

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

—

optional

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

Prop: values
Type: readonly number[]
Default: —
Requirement: optional

Prop: bins
Type: readonly HistogramBin[]
Default: —
Requirement: optional

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

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

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

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

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

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

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