Chart Legend | Typlog UI

ChartLegend reads the ordered ChartRoot.config, renders a semantic list, and uses the same resolved palette as the chart. It is intentionally display-only; filtering and series visibility remain application state.

Revenue

Costs

Profit

Revenue

Costs

Profit

vue

<script setup lang="ts">
import { ChartLegend, ChartRoot } from '@typlog/ui/charts'

const config = {
  revenue: { label: 'Revenue' },
  costs: { label: 'Costs' },
  profit: { label: 'Profit', color: 'var(--green-9)' },
}
</script>

<template>
  <div class="grid gap-6 sm:grid-cols-2">
    <ChartRoot :config="config">
      <ChartLegend align="center" />
    </ChartRoot>
    <ChartRoot :config="config">
      <ChartLegend orientation="vertical" />
    </ChartRoot>
  </div>
</template>

Use the item slot to replace the complete row or the marker slot to replace only the color marker. Both receive the config key, series metadata, and series index.