Chart Legends docs #1888
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| --- | ||
| title: Legend | ||
| page_title: Chart Legend | ||
| description: Discover the capabilities of the Chart Legend in Telerik UI for Blazor. Learn how to show it, and explore the customization options. | ||
| slug: chart-legend | ||
| tags: telerik,blazor,chart,legend,customizations | ||
| published: True | ||
| position: 100 | ||
| --- | ||
|
|
||
| # Telerik Chart Legend | ||
|
|
||
| The Telerik Chart for Blazor can show a visual guide with details about the series or elements in the Chart. This article explores how to add a Chart legend, identify its building blocks, and customize the legend appearance. | ||
|
Contributor
There was a problem hiding this comment. Chart legend and Chart Legend are used somewhat inconsistently. I would go with Chart Legend or Legend when referring to the feature or the component. |
||
|
|
||
| ## Adding a Legend | ||
|
|
||
| 1. Add the `<ChartLegend>` child tag and set the `Visible` parameter to `true` | ||
|
Contributor
There was a problem hiding this comment. Always end your sentences with the proper punctuation. In this case, you need a period at the end. |
||
| 1. Add the `Name` parameter to all Chart series that must be visible in the legend. | ||
|
|
||
| ## Chart Legend Customization | ||
|
Contributor
There was a problem hiding this comment. Retain your heading style. For consistency, go with the -ing form throughout.
Contributor
There was a problem hiding this comment. Also, would Styling be a better term here? |
||
|
|
||
| You can customize the Chart legend by adding nested (child) tags to the `<ChartLegend>` and use their parameters for fine tuning. | ||
|
Contributor
There was a problem hiding this comment. Consider a simple re-write placing the goal as context and focusing on what needs to be done next:
|
||
|
|
||
| The structure of the nested tags is `<ChartLegend*Specifics*>`, where the specifics can be: | ||
|
Contributor
There was a problem hiding this comment. This part is a bit ambiguous. Is this an exhaustive list of possible child tags? Or are these just a few examples of what can be done? |
||
|
|
||
| * `Title` | ||
| * `Item` | ||
| * `Border` | ||
|
|
||
| >note Use the IntelliSense to explore the nested tags. | ||
|
Contributor
There was a problem hiding this comment.
|
||
|
|
||
| ## Legend Settings in the Chart Series | ||
|
Contributor
There was a problem hiding this comment. Consider |
||
|
|
||
| You can customize individual items in the legend for a specific Chart series by adding the `<ChartSeriesLegendItem>` (child tag of `<ChartSeries>`) and its nested tag settings and parameters. | ||
|
|
||
| The structure of the nested tags is `<ChartSeriesLegend*Specifics*>`, where the specifics can be: | ||
|
|
||
| * `Markers` | ||
| * `Highlight` | ||
| * and others | ||
|
|
||
| >note Use the IntelliSense to explore the nested tags. | ||
|
Contributor
There was a problem hiding this comment.
|
||
|
|
||
| ## Example | ||
|
|
||
| Customize the legend items by using nested tag settings. | ||
|
|
||
| ````CSHTML | ||
| <TelerikChart> | ||
| <ChartSeriesItems> | ||
| <ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data"> | ||
| <ChartSeriesLegendItem> | ||
| <ChartSeriesLegendItemMarkers Background="blue"> | ||
| </ChartSeriesLegendItemMarkers> | ||
| </ChartSeriesLegendItem> | ||
| </ChartSeries> | ||
| <ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data"> | ||
| <ChartSeriesLegendItem Type="@ChartLegendItemType.Area"> | ||
| <ChartSeriesLegendItemMarkers Background="#00ff00"> | ||
| </ChartSeriesLegendItemMarkers> | ||
| </ChartSeriesLegendItem> | ||
| </ChartSeries> | ||
| </ChartSeriesItems> | ||
|
|
||
| <ChartCategoryAxes> | ||
| <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis> | ||
| </ChartCategoryAxes> | ||
|
|
||
| <ChartTitle Text="Quarterly revenue"></ChartTitle> | ||
|
|
||
| <ChartLegend Position="ChartLegendPosition.Right" Visible="true"> | ||
| <ChartLegendTitle Text="Revenue per product" | ||
| Background="lightblue" | ||
| Color="black"> | ||
| </ChartLegendTitle> | ||
| <ChartLegendItem> | ||
| <ChartLegendItemMarkers Type="@ChartSeriesMarkersType.Cross" | ||
| Background="#00ff00"> | ||
| </ChartLegendItemMarkers> | ||
| </ChartLegendItem> | ||
| </ChartLegend> | ||
| </TelerikChart> | ||
|
|
||
| @code { | ||
| public List<object> series1Data = new List<object>() { 10, 2, 5, 6 }; | ||
| public List<object> series2Data = new List<object>() { 5, 8, 2, 7 }; | ||
| public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; | ||
| } | ||
| ```` | ||
|
|
||
| ## See Also | ||
|
|
||
| [Live Chart Legend Customization Demo](https://demos.telerik.com/blazor-ui/chart/legend-customization) | ||
|
Contributor
There was a problem hiding this comment. Are there relevant links to the API that you can include? |
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Drop Telerik from the heading.