Custom Chart

Use Chart when you need direct ECharts option control.

<script lang="ts">
  import { Chart, ChartPalette, type KumoChartOption } from "kumo-svelte/components/chart";
  import { echarts } from "../chart-echarts";

  const options = {
    aria: { enabled: true },
    series: [
      {
        type: "pie" as const,
        radius: "70%",
        data: ["Workers", "KV", "R2", "D1"].map((name, index) => ({
          name,
          value: [45, 25, 18, 12][index],
          itemStyle: { color: ChartPalette.categorical(index) },
        })),
      },
    ],
    tooltip: { trigger: "item" as const },
  } satisfies KumoChartOption;
</script>

<Chart {echarts} {options} height={300} />

For tooltips that require custom HTML formatting, use the dangerousHtmlFormatter property instead of the standard ECharts formatter. This makes the security implications more explicit.

When using dangerousHtmlFormatter, sanitize any user-provided content using echarts.format.encodeHTML to prevent XSS vulnerabilities.

<script lang="ts">
  import { Chart, ChartPalette, type KumoChartOption } from "kumo-svelte/components/chart";
  import { echarts } from "../chart-echarts";

  const options = {
    aria: { enabled: true },
    series: [
      {
        type: "pie" as const,
        radius: ["45%", "70%"],
        data: ["Workers", "KV", "R2", "D1"].map((name, index) => ({
          name,
          value: [45, 25, 18, 12][index],
          itemStyle: { color: ChartPalette.categorical(index) },
        })),
      },
    ],
    tooltip: {
      trigger: "item" as const,
      dangerousHtmlFormatter: (params) => {
        const item = Array.isArray(params) ? params[0] : params;
        const name = typeof item?.name === "string" ? item.name : "";
        const value = typeof item?.value === "number" ? item.value : 0;
        return `<strong>${echarts.format.encodeHTML(name)}</strong><br>${value}%`;
      },
    },
  } satisfies KumoChartOption;
</script>

<Chart {echarts} {options} height={300} />

API Reference

Prop	Type	Description
`echarts`	`typeof echarts`	Registered ECharts module instance.
`options`	`KumoChartOption`	ECharts options.
`height`	`number`	Chart height in pixels.
`isDarkMode`	`boolean`	Uses the dark chart palette.
`onEvents`	`Partial<ChartEvents>`	ECharts event handlers.
`optionUpdateBehavior`	`SetOptionOpts`	ECharts setOption behavior.
`ref`	`ECharts \\| null`	Bindable chart instance.

Custom Chart

Custom Tooltip with HTML

API Reference