Skip to content

Conversation

@svdimitr
Copy link
Contributor

No description provided.

@svdimitr svdimitr requested a review from a team January 26, 2024 12:43
@svdimitr svdimitr self-assigned this Jan 26, 2024
@svdimitr svdimitr requested a review from a team as a code owner January 26, 2024 12:43
svdimitr and others added 2 commits January 26, 2024 15:29
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>
Copy link
Contributor

@dimodi dimodi left a 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

@svdimitr svdimitr merged commit 7557a1f into master Jan 26, 2024
@github-actions github-actions bot deleted the chart-legend-docs branch January 26, 2024 15:27
Copy link
Contributor

@ikoevska ikoevska left a 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
Copy link
Contributor

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
Copy link
Contributor

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

Copy link
Contributor

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.
Copy link
Contributor

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.
Copy link
Contributor

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`
Copy link
Contributor

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.
Copy link
Contributor

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.
Copy link
Contributor

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:
Copy link
Contributor

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
Copy link
Contributor

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)
Copy link
Contributor

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants