Documentation / @ripl/vue-charts / defineRiplChart

Function: defineRiplChart()

defineRiplChart(definition): DefineComponent<{ }, () => VNode<RendererNode, RendererElement, {[key: string]: any; }> | VNode<RendererNode, RendererElement, {[key: string]: any; }>[] | null, { }, { }, { }, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, PublicProps, ToResolvedProps<{ }, string[]>, { }, { }, { }, { }, string, ComponentProvideOptions, true, { }, any>

Defined in: vue-charts/src/core/define-chart.ts:113

Builds a declarative component for a Ripl chart.

Props are the chart's options: each one maps to a top-level option, an unbound prop is never written so the chart's own defaults survive, and a changed prop is pushed through update() rather than rebuilding the chart.

The component binds to an enclosing <ripl-context> when there is one, and otherwise renders and owns its own host element — a chart builds its own scene and renderer either way, so it is a peer of <ripl-context> rather than something that sits inside a <ripl-scene>.

Parameters

Parameter	Type	Description
definition	RiplChartDefinition	How to construct the chart and which options it accepts.

Returns

DefineComponent<{ }, () => VNode<RendererNode, RendererElement, {[key: string]: any; }> | VNode<RendererNode, RendererElement, {[key: string]: any; }>[] | null, { }, { }, { }, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, PublicProps, ToResolvedProps<{ }, string[]>, { }, { }, { }, { }, string, ComponentProvideOptions, true, { }, any>

A component to register globally or import directly.

Example

const RiplBarChart = defineRiplChart({
    name: 'RiplBarChart',
    optionKeys: CHART_OPTION_KEYS.bar,
    create: (target, options) => createBarChart(target, options as BarChartOptions),
});