-
Notifications
You must be signed in to change notification settings - Fork 80
Chart Legends docs #1888
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Chart Legends docs #1888
Conversation
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
dimodi
left a comment
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.
Consider adding a short section + link on the Chart Overview page, e.g. here - https://docs.telerik.com/blazor-ui/components/chart/overview#chart-title
ikoevska
left a comment
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.
Ping @svdimitr and @dimodi When you have the time, consider going through the notes and the suggestions inline.
Also, you might want to go through some examples of docs about Chart Legends:
- https://blazor.radzen.com/chart-legend (super basic, but note how it discusses the defaults and what the legend displays; it also discusses how to show or hide the legend)
- https://blazor.syncfusion.com/documentation/chart/legend (a great example of what the Legend article should cover - it's likely that readers are interested in how to tackle position and alignment, how to show or hide the legend, and how to highlight data in the chart by selecting something in the legend)
- https://mui.com/x/react-charts/legend/ (although a React library, again, note the use cases covered by the page - it discusses showing and hiding the legend, customizing the position, styling labels, etc.)
For a future update of this page, consider covering some of the missing information. For example, is the legend enabled or disabled, by default? If not enabled, how do you enable it? If shown by default, can you hide it? Can you change its position and alignment, etc.
| position: 100 | ||
| --- | ||
|
|
||
| # Telerik Chart Legend |
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.
| 1. Add the `<ChartLegend>` child tag and set the `Visible` parameter to `true` | ||
| 1. Add the `Name` parameter to all Chart series that must be visible in the legend. | ||
|
|
||
| ## Chart Legend Customization |
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.
Retain your heading style. For consistency, go with the -ing form throughout.
## Customizing the Chart Legend
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.
Also, would Styling be a better term here?
| * `Item` | ||
| * `Border` | ||
|
|
||
| >note Use the IntelliSense to explore the nested tags. |
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.
>note Use IntelliSense to explore the nested tags.
| * `Highlight` | ||
| * and others | ||
|
|
||
| >note Use the IntelliSense to explore the nested tags. |
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.
>note Use IntelliSense to explore the nested tags.
|
|
||
| ## Adding a Legend | ||
|
|
||
| 1. Add the `<ChartLegend>` child tag and set the `Visible` parameter to `true` |
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.
Always end your sentences with the proper punctuation. In this case, you need a period at the end.
|
|
||
| # 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. |
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.
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.
|
|
||
| ## Chart Legend Customization | ||
|
|
||
| You can customize the Chart legend by adding nested (child) tags to the `<ChartLegend>` and use their parameters for fine tuning. |
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.
Consider a simple re-write placing the goal as context and focusing on what needs to be done next:
To fine tune the Chart Legend, add nested (child) tags to the
<ChartLegend>and use their parameters.
|
|
||
| You can customize the Chart legend by adding nested (child) tags to the `<ChartLegend>` and use their parameters for fine tuning. | ||
|
|
||
| The structure of the nested tags is `<ChartLegend*Specifics*>`, where the specifics can be: |
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.
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?
|
|
||
| >note Use the IntelliSense to explore the nested tags. | ||
|
|
||
| ## Legend Settings in the Chart Series |
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.
Consider ## Customizing Individual Items in the Chart Legend instead. Also would Styling fit better here?
|
|
||
| ## See Also | ||
|
|
||
| [Live Chart Legend Customization Demo](https://demos.telerik.com/blazor-ui/chart/legend-customization) |
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.
Are there relevant links to the API that you can include?
No description provided.