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.