ConstAll props that affect the ECharts instance are reactive, changing them updates the chart without unmounting the component:
option: calls setOption via createChartEffecttheme: calls setTheme in place (ECharts 6+, no reinit)loading: calls showLoading / hideLoadingrenderer: triggers a full dispose -> reinit cycle (the only prop that does)group: updates chart.group and calls connect in placeautoResize: attaches or detaches the ResizeObserver in placeProps not passed inherit from the nearest SolidEChartProvider ancestor. Per-component props always win over provider defaults.
Publishes the instance to context so useChart works anywhere inside the component tree. Pass children to build co-located controls that access the instance without prop drilling.
See SolidEChartProps for the full prop reference.
// Basic usage
const [data, setData] = createSignal([120, 200, 150, 80]);
const option = () => ({
xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: data() }],
});
<SolidEChart option={option} style={{ width: '100%', height: '400px' }} />
// With provider defaults and per-chart override
<SolidEChartProvider theme="dark" renderer="canvas">
<SolidEChart option={chartA} />
<SolidEChart option={chartB} theme="default" /> // overrides provider theme
</SolidEChartProvider>
// With children, `useChart` works inside the tree
// can call `useChart` to access dispatch and instance
<SolidEChart option={option}>
<MyControls />
</SolidEChart>
The primary chart component. A declarative wrapper around createChart and createChartEffect that manages the full ECharts instance lifecycle inside a SolidJS component tree.