Chart Legend

Sage charts legend are used primarily in React-based Recharts bar charts when multiple bars are used for a given data point.

React Component

Default

Last year
This year

Sage Component

SageChartLegend

<h3>Default</h3>
<%= sage_component SageChartLegend, {
  items: [
    {
      title: 'Last year',
      color: SageTokens::COLOR_PALETTE[:YELLOW_200],
    },
    {
      title: 'This year',
      color: SageTokens::COLOR_PALETTE[:SAGE_200],
    }
  ]
} %>

Property	Description	Type	Default
`items` required	Items to show in the legend	`Array<{ title: String, color: String (Hex value), }>`	`nil`

Don't