mochart

Appearance

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 as one object per category; wrapped in an ArrayOfObjectsDataProvider keyed by categoryAxisConfig.property.

  • Type: readonly DataRow[]
  • 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).

  • Type: MochartConfig
  • Required: yes

dataProvider ​

The data source; use a built-in provider or any DataProvider implementation.

  • Type: DataProvider
  • 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 applied to the chart's root element.

  • 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). When set (not undefined) it overrides the chart's internal focus state on every update; pass back the value reported by onFocus to keep several charts in sync. Leave undefined to let the chart manage focus internally.

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

  • Type: string | null
  • Required: no

filteredSeriesIds ​

Externally-controlled filter map (series id → true = filtered out). When set it overrides the chart's internal filter state on every update; pass back the map reported by onSeriesFilter to sync legend filtering.

  • 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 0.

  • 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 ​

The chart's current width in pixels.

  • Type: number
  • Required: no

height ​

The chart's current height in pixels.

  • Type: number
  • Required: no

mochartConfig ​

The enhanced config, or null when the config failed validation.

  • Type: MochartConfig | null
  • Required: no

dataProvider ​

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

  • Type: DataProvider | null
  • Required: no

error ​

The error prop, when the chart is in its error state.

  • Type: unknown
  • Required: no

hasData ​

False when the dataset has no categories.

  • Type: boolean
  • Required: no

Released under the BSD-3-Clause License.