compote-echart

Svelte 5 wrapper for ECharts.

Install

bun add compote-echart echarts

Usage

<script lang="ts">
	import { Chart } from 'compote-echart';
	import { init, use } from 'echarts/core';
	import { BarChart } from 'echarts/charts';
	import { GridComponent, TitleComponent, TooltipComponent, DatasetComponent } from 'echarts/components';
	import { SVGRenderer } from 'echarts/renderers';

	use([BarChart, GridComponent, TitleComponent, TooltipComponent, DatasetComponent, SVGRenderer]);

	const options = {
		title: { text: 'Sales' },
		xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
		yAxis: { type: 'value' },
		series: [{ type: 'bar', data: [12, 20, 8] }]
	};
</script>

<Chart {init} {options} />

To apply rounded corners, clip the chart inside a wrapper:

<div class="h-full overflow-hidden rounded-lg shadow-xl">
	<Chart {init} {options} />
</div>

rounded-lg affects the wrapper, and overflow-hidden makes the chart content respect that radius.

Exports

• Chart
• ChartProps
• ECMouseEvent
• ECInteractionEvent
• EventHandlers
• MouseEventHandlers
• InteractionEventHandlers

Notes

• echarts is a peer dependency.
• The chart container fills its parent, so give the parent a height.
• Event handlers can be passed as onclick, onfinished, and similar props.