Chart props

Props accepted by the two chart entry points, createDefaultChart and createChart (see the API reference). The framework bindings accept the same props — with the per-binding renamings noted on each framework page — and derive width and height from their container when those are omitted.

This page is generated from the type declarations in the library source, so it documents exactly what the shipped .d.ts and your editor hovers do.

createDefaultChart props

Passed to createDefaultChart, which validates and enhances the config internally, in addition to the shared props below.

From the DefaultChartProps interface, which also includes BaseChartProps. Property anchors are stable: link to any entry as #defaultChartProps.propertyName.

config

The raw config; validated and enhanced internally on every change.

• Type: MochartInputConfig
• Required: yes

data

The dataset in either built-in shape — array of objects (one per category) or object of arrays (one per property); wrapped in the matching provider.

• Type: ArrayOfObjectsData | ObjectOfArraysData
• Required: yes

createChart props

Passed to createChart, which takes an already-enhanced config and a data provider, in addition to the shared props below.

From the ManagedChartProps interface, which also includes BaseChartProps. Property anchors are stable: link to any entry as #managedChartProps.propertyName.

mochartConfig

The enhanced config produced by enhanceConfig (validated, defaults applied); null while the host is still loading it.

• Type: MochartConfig | null
• Required: yes

dataProvider

The data source; use a built-in provider or any DataProvider implementation. Null while the host is still loading it.

• Type: DataProvider | null
• Required: yes

Shared props

Accepted by both entry points. The focus and filter props are the controlled counterparts of the callbacks: set one and it overrides the chart's internal state on every update; leave it undefined and the chart manages that piece itself.

From the BaseChartProps interface, which also includes ChartCallbacks and ChartFactories. Property anchors are stable: link to any entry as #props.propertyName.

width

Chart width in pixels (the framework bindings can derive it from the container).

• Type: number
• Required: yes

height

Chart height in pixels (the framework bindings can derive it from the container).

• Type: number
• Required: yes

style

Inline style on the chart's root element, over the default position: relative (the tooltip and live region anchor to the root — keep position non-static). Object keys are camelCase and bare numbers get px (unitless properties excepted); the string form is regular kebab-case CSS text.

• Type: string | Record<string, string | number | null | undefined>
• Required: no

loading

Switches the chart into its loading state (see getLoadingComponent).

• Type: boolean
• Required: no

error

Switches the chart into its error state when set to anything but null/undefined — '' and 0 count (see getErrorComponent).

• Type: unknown
• Required: no

focusedCategoryIndex

Externally-controlled focused category index (-1 = none; undefined = chart manages focus). When set it overrides internal focus on every update; pass back onFocus values to sync charts.

• Type: number
• Required: no

focusedValueAxisId

Externally-controlled focused value-axis id (null = none). See focusedCategoryIndex.

• Type: string | null
• Required: no

focusedSeriesId

Externally-controlled focused series id (null = none). See focusedCategoryIndex. Use the id of a series that does not set followSeries: one that follows another has no focus state of its own.

• Type: string | null
• Required: no

filteredSeriesIds

Externally-controlled filter map (series id → true = filtered out). When set it overrides internal filter state on every update; pass back onSeriesFilter maps to sync. Key it by series that do not set followSeries — a series that follows another filters with the series it follows, and its own id has no effect.

• Type: Record<string, boolean>
• Required: no

State factories

Customize what renders in each non-chart state — see Chart states. Each factory is called with the context below and returns a DOM node or string.

From the ChartFactories interface. Property anchors are stable: link to any entry as #factories.propertyName.

getLoadingComponent

Rendered while the loading prop is true.

• Type: ChartContentFactory
• Required: no

getErrorComponent

Rendered while the error prop is set.

• Type: ChartContentFactory
• Required: no

getNoDataComponent

Rendered when the dataset has no categories.

• Type: ChartContentFactory
• Required: no

getNoSizeComponent

Rendered when width or height is not a positive number (0 before a container is laid out).

• Type: ChartContentFactory
• Required: no

getNoSeriesComponent

Rendered when the config declares no series.

• Type: ChartContentFactory
• Required: no

getConfigErrorComponent

Rendered when the config fails validation.

• Type: ChartContentFactory
• Required: no

ChartFactoryContext

The argument passed to every state factory.

From the ChartFactoryContext interface. Property anchors are stable: link to any entry as #factoryContext.propertyName.

width

Width in pixels of the box the content fills: the whole chart for the no-size/config-error/no-config states, the plot area for the rest.

• Type: number
• Required: yes

height

Height in pixels of the same box width measures.

• Type: number
• Required: yes

mochartConfig

The enhanced config as supplied (even the invalid one in the config-error state); null when none yet.

• Type: MochartConfig | null
• Required: yes

dataProvider

The current data provider, or null when there is none.

• Type: DataProvider | null
• Required: yes

error

The active error — the error prop or the provider's; undefined outside the error state.

• Type: unknown
• Required: yes

hasData

True when the committed dataset holds at least one category.

• Type: boolean
• Required: yes