Zero-config <MarkdownChart source={markdown} />, provider, chart block, and
createMarkdownChartComponents() adapter for react-markdown. The zero-config
component registers ECharts, KPI, and interactive table renderers automatically
and gives chart blocks a 360px minimum height; KPI cards and tables override it
with their own content height.
Canonical inline datasets and renderer-resolved referenced datasets
automatically include a Chart/Data icon switch. Tabular Data views load the
interactive table on first use and fall back to the core HTML view if loading
fails.
Install the zero-config component with:
pnpm add echarts @datafe-open/markdown-chart-reactreact-markdown is included by this package. Applications using the lower-level
provider and importing react-markdown directly should still declare
react-markdown as their own dependency.
The pre adapter reads the live registry from MarkdownChartProvider; newly
registered renderer aliases work without rebuilding a language list. When
using this lower-level adapter directly, give the chart class a non-zero height
so the chart runtime can measure its container.
Set streaming on MarkdownChart or MarkdownChartProvider while tokens are
arriving. Closed chart fences render immediately; only the active unterminated
tail fence waits. The provider automatically infers the Markdown source from a
direct ReactMarkdown child, so the usual advanced integration needs no extra
source prop. Pending and asynchronously mounting charts show the package loading
state; pass loadingLabel to MarkdownChart, MarkdownChartProvider, or an
individual MarkdownChartBlock to localize its text.
Pass labels to the same APIs to localize the Chart/Data controls,
accessibility labels, empty/truncated data messages, and the
Chart unavailable error fallback.
Pass referenceActions to MarkdownChart or MarkdownChartProvider to expose
renderer reference controls. The host selects supported refs with canOpen and
handles clicks with open; the packages do not interpret or navigate refs.
KPI and table referenced data use their independent renderer options:
const kpiOptions = useMemo(
() => ({ validateDataRef, resolveDataRef }),
[validateDataRef, resolveDataRef],
);
const tableOptions = useMemo(
() => ({ validateDataRef, resolveDataRef }),
[validateDataRef, resolveDataRef],
);
<MarkdownChart
source={source}
kpi={kpiOptions}
table={tableOptions}
/>Keep the kpi and table options, resolver callbacks, and referenceActions.canOpen / open
callbacks stable across streaming renders so the automatic registry and completed
chart mounts can be reused.
New legacy ChatBI integrations should create one createLegacySandboxClient
per authenticated principal lifecycle, bind { sessionId, requestId, phase, cacheScopeKey }, and pass the binding as echarts={{ legacySandbox }}. Keep
the client stable across ordinary renders and rebind when context changes.
cacheScopeKey must be an explicit stable, non-secret principal identity; do
not use a token/cookie value or hash, and rebuild the client on login changes.
echarts.legacySandbox is the only supported public configuration for temporary
ChatBI query and sandbox-file fences; the zero-config component exposes no
standalone legacy resolver props or callback context keys.