# Legend

Show, move, restyle, or hide the legend that tells readers which series is which on a Blazor chart.

Keywords: chart, graph, legend

> API reference: [RadzenLegend API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenLegend.md)

## Examples

## Radzen Blazor Chart Legend

The legend tells readers which series is which. It shows by default using each series title; you can move it, restyle it, or hide it entirely.

### Legend position

The legend is at the right side of the chart by default. Change the position of the legend via the `Position` property.

```razor
<div class="rz-p-0 rz-p-md-12">
    <RadzenChart>
        <RadzenColumnSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenLegend Position="LegendPosition.Bottom" />
    </RadzenChart>
</div>

@code {
  class DataItem
  {
      public string Quarter { get; set; }
      public double Revenue { get; set; }
  }

  DataItem[] revenue = new DataItem[]
  {
      new DataItem { Quarter = "Q1", Revenue = 234000 },
      new DataItem { Quarter = "Q2", Revenue = 284000 },
      new DataItem { Quarter = "Q3", Revenue = 274000 },
      new DataItem { Quarter = "Q4", Revenue = 294000 }
  };
}
```


### Hide the legend

To hide the legend set the `Visible` property to `false`.

```razor
<div class="rz-p-0 rz-p-md-12">
    <RadzenChart>
        <RadzenColumnSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
        <RadzenLegend Visible="false" />
    </RadzenChart>
</div>

@code {
  class DataItem
  {
      public string Quarter { get; set; }
      public double Revenue { get; set; }
  }

  DataItem[] revenue = new DataItem[]
  {
      new DataItem { Quarter = "Q1", Revenue = 234000 },
      new DataItem { Quarter = "Q2", Revenue = 284000 },
      new DataItem { Quarter = "Q3", Revenue = 274000 },
      new DataItem { Quarter = "Q4", Revenue = 294000 }
  };
}
```


### Legend item template

Use the `ItemTemplate` of the legend to add or style the content of the legend items. The template context provides the default `Text`, the `Data` of the item, its `Series` and `Color`. The marker and the click behavior are preserved and the chart reserves the space the rendered legend needs.

```razor
<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12" AlignItems="AlignItems.Center">
    <RadzenStack Style="width: 100%; max-width: 600px;">
        <RadzenChart>
            <RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue">
                <RadzenSeriesDataLabels Visible="false" />
            </RadzenDonutSeries>
            <RadzenLegend>
                <ItemTemplate Context="item">
                    @{ var data = (DataItem)item.Data; }
                    <div>@item.Text</div>
                    <div style="margin-top: 0.25rem; font-style: italic; color: var(--rz-text-secondary-color);">
                        @data.Value.ToString("N0") (@((data.Value / total).ToString("P0")))
                    </div>
                </ItemTemplate>
            </RadzenLegend>
        </RadzenChart>
    </RadzenStack>
</RadzenStack>

@code {
    class DataItem
    {
        public string Category { get; set; }
        public double Value { get; set; }
    }

    DataItem[] revenue = new DataItem[]
    {
        new DataItem { Category = "Cloud", Value = 4200 },
        new DataItem { Category = "Licenses", Value = 3100 },
        new DataItem { Category = "Services", Value = 2300 },
        new DataItem { Category = "Support", Value = 1500 },
        new DataItem { Category = "Training", Value = 900 },
    };

    double total => revenue.Sum(item => item.Value);
}
```