```
`$lib/components/evilcharts/ui/echarts-legend/legend.svelte`
```svelte
```
Finally, create `echarts-dot` in the same `ui` folder and paste the dot styles the series markers draw with there.
### $lib/components/evilcharts/ui/echarts-dot
`$lib/components/evilcharts/ui/echarts-dot/dot.ts`
```ts
import type * as echarts from 'echarts/core';
export type DotVariant = 'none' | 'default' | 'border' | 'colored-border' | 'ping';
export type DotItemStyleOption = {
color?: string | echarts.graphic.LinearGradient;
borderColor?: string | echarts.graphic.LinearGradient;
borderWidth?: number;
opacity?: number;
};
export type DotStyle = { size: number; itemStyle: DotItemStyleOption };
function colorWithAlpha(color: string, alpha: number): string {
if (color.startsWith('#')) {
let hex = color.slice(1);
if (hex.length === 3) hex = hex.replace(/./g, (character) => character.repeat(2));
const numeric = Number.parseInt(hex, 16);
return `rgba(${(numeric >> 16) & 255}, ${(numeric >> 8) & 255}, ${numeric & 255}, ${alpha})`;
}
const match = color.match(/rgba?\(([^)]+)\)/);
if (!match) return color;
const [red, green, blue] = match[1].split(',').map((part) => Number.parseFloat(part));
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}
export function dotItemStyle(
variant: DotVariant,
paint: string | echarts.graphic.LinearGradient,
background: string
): DotItemStyleOption {
switch (variant) {
case 'border':
return { color: paint, borderColor: background, borderWidth: 2 };
case 'colored-border':
return { color: background, borderColor: paint, borderWidth: 1 };
case 'ping':
return {
color: paint,
borderColor: typeof paint === 'string' ? colorWithAlpha(paint, 0.28) : paint,
borderWidth: 10
};
case 'default':
return { color: paint, borderWidth: 0 };
default:
return {};
}
}
export const DOT_SIZES: Record = {
none: 0,
default: 6,
border: 8,
'colored-border': 6,
ping: 8
};
export function dotStyle(
variant: DotVariant,
paint: string | echarts.graphic.LinearGradient,
background: string
): DotStyle {
return { size: DOT_SIZES[variant], itemStyle: dotItemStyle(variant, paint, background) };
}
export function sampleGradient(slots: string[], position: number): string {
if (slots.length <= 1) return slots[0] ?? 'rgba(120, 120, 120, 1)';
const parse = (color: string) =>
color
.match(/rgba?\(([^)]+)\)/)?.[1]
.split(',')
.map(Number) ?? [120, 120, 120, 1];
const scaled = position * (slots.length - 1);
const index = Math.min(Math.floor(scaled), slots.length - 2);
const fraction = scaled - index;
const [redFrom, greenFrom, blueFrom, alphaFrom = 1] = parse(slots[index]);
const [redTo, greenTo, blueTo, alphaTo = 1] = parse(slots[index + 1]);
const lerp = (from: number, to: number) => from + (to - from) * fraction;
return `rgba(${Math.round(lerp(redFrom, redTo))}, ${Math.round(lerp(greenFrom, greenTo))}, ${Math.round(lerp(blueFrom, blueTo))}, ${lerp(alphaFrom, alphaTo).toFixed(3)})`;
}
```
`$lib/components/evilcharts/ui/echarts-dot/index.ts`
```ts
export {
DOT_SIZES,
dotItemStyle,
dotStyle,
sampleGradient,
type DotItemStyleOption,
type DotStyle,
type DotVariant
} from './dot.js';
```
## Usage
The ECharts radar chart is composable, sharing the LayerChart sibling's API shape. `` is the container, and every part hangs off it as a compound member — ``, ``, ``, ``, ``, and one or more `` — so a single import gives you the whole chart. Each `` carries its own `variant` and `isClickable`, so one chart can mix fill styles and make only some series interactive.
```svelte
```
```svelte
const data = [
{ skill: "JavaScript", desktop: 186, mobile: 80 },
{ skill: "TypeScript", desktop: 305, mobile: 200 },
{ skill: "React", desktop: 237, mobile: 120 },
{ skill: "Node.js", desktop: 173, mobile: 190 },
{ skill: "CSS", desktop: 209, mobile: 130 },
];
const chartConfig = {
desktop: {
label: "Desktop",
colors: { light: ["#3b82f6"], dark: ["#60a5fa"] },
},
mobile: {
label: "Mobile",
colors: { light: ["#10b981"], dark: ["#34d399"] },
},
} satisfies ChartConfig;
```
The difference from the LayerChart sibling is under the hood: these compound children are declarative configuration slots rather than visual DOM nodes. The root reads their props and compiles an ECharts option, which ECharts paints with Canvas by default or SVG when `renderer="svg"`.
The `config` is the same contract as every EvilCharts chart — each key maps a data key to a `label` and a per-theme `colors` array. See [Chart Config](/docs/chart-config) for the full shape. Colors resolve from your CSS variables at runtime, so dark mode just works.
>
The ECharts implementation brings two small departures from the LayerChart sibling: a radar series is a single polygon, so multi-color configs paint the stroke and fill as gradients while the vertex dots take one representative color; and the tooltip is item-triggered, showing the hovered series and its per-category values rather than anchoring on a category.
### SVG Renderer
Pass `renderer="svg"` to the chart root to opt into ECharts' SVG renderer. Omit it to use the default Canvas renderer.
### renderer="svg"
```svelte
```
### Interactive Selection
Set `isClickable` on a `` to make it selectable by click, and on `