You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The <ApiLinkpkg="charts"type="DataLegend" /> has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for:
158
158
159
-
-`StyleGroupRow`: This event fires for each group to style text displayed in group rows.
160
-
-`StyleHeaderRow`: This event fires when rendering the header row.
161
-
-`StyleSeriesRow`: This event fires once for each series row, which allows conditional styling of the values of the series.
162
-
-`StyleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart.
163
-
-`StyleSummaryRow`: This event fires once when rendering the summary row.
164
-
-`StyleSummaryColumn`: This event fires once when rendering the summary column.
159
+
-<ApiLinkpkg="charts"type="DataLegend"member="styleGroupRow"label="StyleGroupRow" />: This event fires for each group to style text displayed in group rows.
160
+
-<ApiLinkpkg="charts"type="DataLegend"member="styleHeaderRow"label="StyleHeaderRow" />: This event fires when rendering the header row.
161
+
-<ApiLinkpkg="charts"type="DataLegend"member="styleSeriesRow"label="StyleSeriesRow" />: This event fires once for each series row, which allows conditional styling of the values of the series.
162
+
-<ApiLinkpkg="charts"type="DataLegend"member="styleSeriesColumn"label="StyleSeriesColumn" />: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart.
163
+
-<ApiLinkpkg="charts"type="DataLegend"member="styleSummaryRow"label="StyleSummaryRow" />: This event fires once when rendering the summary row.
164
+
-<ApiLinkpkg="charts"type="DataLegend"member="styleSummaryColumn"label="StyleSummaryColumn" />: This event fires once when rendering the summary column.
165
165
166
166
Some of the events exposes a <ApiLinkpkg="charts"type="DataLegendStylingRowEventArgs"suffix={false} /> parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series.
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,7 @@ The following example demonstrates the usage of the data legend grouping and hig
42
42
<Samplesrc="/charts/data-chart/data-tooltip-grouping-and-highlighting"height={500}alt="Angular Data Tooltip Grouping Highlight Example" />
43
43
44
44
45
-
The following example demonstrates the usage of the data highlighting overlay feature within the <ApiLinkpkg="charts"type="DataChart" /> control using the `HighlightedValueMemberPath`:
45
+
The following example demonstrates the usage of the data highlighting overlay feature within the <ApiLinkpkg="charts"type="DataChart" /> control using the <ApiLinkpkg="charts"type="ColumnSeries"member="highlightedValueMemberPath"label="HighlightedValueMemberPath" />:
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx
-2Lines changed: 0 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -139,9 +139,7 @@ First, the <ApiLink pkg="charts" type="DataPieChart" member="highlightingBehavio
139
139
The <ApiLinkpkg="charts"type="DataPieChart"member="highlightingMode"label="HighlightingMode" /> enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do:
140
140
141
141
- <ApiLinkpkg="charts"kind="enum"type="SeriesSelectionMode"member="Brighten"label="Brighten"prefixed={false} />: The series will have its color brightened when the mouse position is over or near it.
142
-
-`BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it.
143
142
- <ApiLinkpkg="charts"kind="enum"type="SeriesSelectionMode"member="FadeOthers"label="FadeOthers"prefixed={false} />: The series will retain its color when the mouse position is over or near it, while the others will appear faded.
144
-
-`FadeOthersSpecific`: The specific slice will retain its color when the mouse position is over or near it, while the others will appear faded.
145
143
- <ApiLinkpkg="charts"kind="enum"type="SeriesSelectionMode"member="None"label="None"prefixed={false} />: The series and slices will not be highlighted.
146
144
147
145
The following example demonstrates the mouse highlighting behaviors of the <ApiLinkpkg="charts"type="DataPieChart" /> component:
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/charts/types/donut-chart.mdx
+1-2Lines changed: 1 addition & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,6 @@ You can create Donut Chart using the <ApiLink pkg="charts" type="DoughnutChart"
23
23
Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include:
24
24
25
25
-[Pie](pie-chart.md)
26
-
{/*- Funnel*/}
27
26
-[Stacked Area](area-chart.md)
28
27
-[Stacked 100% Area (Stacked Percentage Area)](area-chart.md)
29
28
-[Stacked Bar](bar-chart.md)
@@ -54,7 +53,7 @@ The Angular Donut Chart includes interactive features that give the viewer tools
54
53
- You have negative data, as this can not be represented in a donut chart.
55
54
56
55
## Angular Donut Chart - Slice Selection
57
-
The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The `SliceClick` event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.
56
+
The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The <ApiLinkpkg="charts"type="DoughnutChart"member="sliceClick"label="SliceClick" /> event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.
0 commit comments