CngxChartLegend

Presentational legend atom - a row (or column) of coloured swatches paired with labels. Decoupled from <cngx-chart> and the layer atoms by design: the consumer drives the items array, so the legend stays a pure rendering surface with zero opinions about series-discovery, visibility-toggling, or interaction.

Compose alongside a chart wherever a multi-layer composition needs a label key:

<cngx-chart [data]="series">
  <svg:g cngxLine [data]="traffic" style="--cngx-line-color: #3b82f6"></svg:g>
  <svg:g cngxLine [data]="errors" style="--cngx-line-color: #d2452f"></svg:g>
</cngx-chart>
<cngx-chart-legend
  [items]="[
    { label: 'Traffic', color: '#3b82f6' },
    { label: 'Errors',  color: '#d2452f' }
  ]"
/>

Theming via --cngx-chart-legend-gap, --cngx-chart-legend-swatch-size, --cngx-chart-legend-swatch-radius, --cngx-chart-legend-font-size. A rendered value carries its own --cngx-chart-legend-value-color and --cngx-chart-legend-value-font-weight so a legend doubling as a readout can weight the number apart from the label without a wrapper element. [orientation] flips between row and column; [align] aligns along the main axis (start, center, end).