## Usage Compose the legend as a child of the chart root. Pass `variant` to control the indicator style, and `isClickable` to let each entry toggle selection of its series. ```svelte ``` ## Variants Control the legend indicator style with the `variant` prop on ``. ### Square ### variant='square' ```svelte String(value).substring(0, 3)} /> ``` ### Circle ### variant='circle' ```svelte String(value).substring(0, 3)} /> ``` ### Circle Outline ### variant='circle-outline' ```svelte String(value).substring(0, 3)} /> ``` ### Rounded Square (Default) ### variant='rounded-square' ```svelte String(value).substring(0, 3)} /> ``` ### Rounded Square Outline ### variant='rounded-square-outline' ```svelte String(value).substring(0, 3)} /> ``` ### Vertical Bar ### variant='vertical-bar' ```svelte String(value).substring(0, 3)} /> ``` ### Horizontal Bar ### variant='horizontal-bar' ```svelte String(value).substring(0, 3)} /> ``` ## API Reference Props for the `` part. ### `variant` type: `"square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"` · default: `"rounded-square"` Style of the legend indicator icon. ### `align` type: `"left" | "center" | "right"` · default: `"right"` Horizontal placement of the legend items. ### `verticalAlign` type: `"top" | "middle" | "bottom"` · default: `"top"` Vertical placement of the legend items. ### `isClickable` type: `boolean` · default: `false` When enabled, clicking an entry toggles selection of its series.