Skip to content

Commit ad9db84

Browse files
dimodidimodi
authored
kb(Chart): Add KB for bubble sizing in multiple Charts (#3117)
1 parent 5d1c96e commit ad9db84

File tree

2 files changed

+175
-12
lines changed

2 files changed

+175
-12
lines changed

‎components/chart/types/bubble.md

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,17 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g
1818

1919
@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
2020

21-
#### To create a bubble chart:
21+
## Creating a Blazor Bubble Chart
2222

23-
1. add a `ChartSeries` to the `ChartSeriesItems` collection
24-
2. set its `Type` property to `ChartSeriesType.Bubble`
25-
3. provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size
23+
To use a Chart component with Bubble series:
2624

25+
1. Add a `ChartSeries` to the `ChartSeriesItems` collection.
26+
2. Set its `Type` property to `ChartSeriesType.Bubble`.
27+
3. Provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size.
2728

2829
>caption A bubble chart that shows projected population change on a plot of life expectancy versus fertility rate
2930
3031
````RAZOR
31-
@* Bubble Series *@
32-
3332
<TelerikChart>
3433
3534
<ChartSeriesItems>
@@ -90,9 +89,22 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g
9089
new ModelData() { LifeExpectancy = 74.3, FertilityRate = 1.85, PopulationChange = 3000000, Country = "Great Britain" }
9190
};
9291
}
93-
9492
````
9593

94+
## Bubble Sizing
95+
96+
The Chart component determines the physical size of each bubble automatically:
97+
98+
* The maximum bubble size is 20% of the smaller Chart dimension (width or height). This ensures that the largest bubbles do not occupy too much space.
99+
* The minimum bubble size is 2% of the smaller Chart dimension, but not less than `10px`. This ensures that even the smallest bubbles are perceivable and accessible. The smallest bubble size also depends on the largest `Size` value in the Chart series.
100+
* All bubble sizes are set proportionately, as long as they comply with the preceding rules.
101+
102+
As a result of the above algorithms:
103+
104+
* Bubble sizing may not be linear if the ratio between the smallest and largest `Size` values is too big. For example, a 10-fold bubble size difference is achievable with a large-enough Chart, but a 100-fold size difference is not supported.
105+
* The Bubble Chart helps users compare bubble sizes in the same Chart instance, rather than between different instances. To compare bubbles from multiple series, define these series in the same Chart instance.
106+
107+
If you need to [improve the bubble size comparability across several Charts](slug:chart-kb-bubble-size), then use a dummy data item with a `Size` value that matches the maximum `Size` value in all Chart instances.
96108

97109
## Bubble Chart Specific Appearance Settings
98110

@@ -102,10 +114,8 @@ The color of a series is controlled through the `Color` property that can take a
102114

103115
The `ColorField` can change the color of individual items. To use it, pass a valid CSS color to the corresponding field in the model and the chart will use its values instead of the `Color` parameter.
104116

105-
106117
@[template](/_contentTemplates/chart/link-to-basics.md#opacity-area-bubble)
107118

108-
109119
### Negative Values
110120

111121
Negative values are allowed for the X and Y fields, because they are plotted on standard numerical axes.
@@ -149,12 +159,11 @@ The size field should, generally, have positive values as it correlates to the p
149159
}
150160
````
151161

152-
153162
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
154163

155164
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-numerical)
156165

157-
158166
## See Also
159167

160-
* [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart)
168+
* [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart)
169+
* [Configure Relative Bubble Sizes in Multiple Charts](slug:chart-kb-bubble-size)

‎knowledge-base/chart-bubble-size.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
title: Set Specific Bubble Sizes
3+
description: Learn how to define bubble sizes in different Charts that users can compare more easily.
4+
type: how-to
5+
page_title: How to Set Specific Bubble Sizes
6+
slug: chart-kb-bubble-size
7+
tags: telerik, blazor, chart, bubble
8+
ticketid: 1693133
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Chart for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB answers the following questions:
26+
27+
* How to display smaller bubbles for smaller values in a specific Telerik Blazor Chart instance?
28+
* How to help users compare bubble sizes for different data in different Charts?
29+
* How to display all bubbles with a specific defined `Size` value in certain dimensions?
30+
* How to use fixed bubble sizes instead of relative?
31+
32+
## Solution
33+
34+
The [Bubble Chart sets the minimum and maximum bubble sizes automatically](slug:components/chart/types/bubble#bubble-sizing), depending on the Chart dimensions, and the smallest and largest `Size` values in all series in the Chart instance.
35+
36+
To display comparable bubble sizes in multiple Charts:
37+
38+
1. Use an additional dummy data item with a `Size` value that matches the largest value in all involved Chart instances.
39+
1. Hide the dummy bubble:
40+
* Set the `Min` or `Max` parameter of `<ChartXAxis>` and `<ChartYAxis>`.
41+
* Position the bubble outside the visible Chart area (viewport).
42+
43+
>caption Use comparable bubble sizes in several Charts
44+
45+
````RAZOR
46+
<h3>Hundreds</h3>
47+
48+
<p>An additional bubble with <code>Size</code> <strong>3000</strong> is positioned outside the visible Chart area.</p>
49+
50+
<TelerikChart Width="70vw" Height="35vh">
51+
<ChartSeriesItems>
52+
<ChartSeries Type="ChartSeriesType.Bubble"
53+
Data="@SeriesData1"
54+
XField="@nameof(BubbleModel.X)"
55+
YField="@nameof(BubbleModel.Y)"
56+
SizeField="@nameof(BubbleModel.Size)">
57+
</ChartSeries>
58+
</ChartSeriesItems>
59+
<ChartXAxes>
60+
<ChartXAxis Min="0" />
61+
</ChartXAxes>
62+
<ChartYAxes>
63+
<ChartYAxis Min="0" />
64+
</ChartYAxes>
65+
<ChartTooltip Visible="true" Shared="true">
66+
<Template>
67+
@{ var dataItem = (BubbleModel)context.DataItem; }
68+
@dataItem.Size
69+
</Template>
70+
</ChartTooltip>
71+
</TelerikChart>
72+
73+
<h3>Thousands</h3>
74+
75+
<p>The max <code>Size</code> value is <strong>3000</strong>. This is the max value in all Charts and series, so there is no need for additional hidden bubbles.</p>
76+
77+
<TelerikChart Width="70vw" Height="35vh">
78+
<ChartSeriesItems>
79+
<ChartSeries Type="ChartSeriesType.Bubble"
80+
Data="@SeriesData2"
81+
XField="@nameof(BubbleModel.X)"
82+
YField="@nameof(BubbleModel.Y)"
83+
SizeField="@nameof(BubbleModel.Size)">
84+
</ChartSeries>
85+
</ChartSeriesItems>
86+
<ChartXAxes>
87+
<ChartXAxis Min="0" />
88+
</ChartXAxes>
89+
<ChartYAxes>
90+
<ChartYAxis Min="0" />
91+
</ChartYAxes>
92+
<ChartTooltip Visible="true" Shared="true">
93+
<Template>
94+
@{ var dataItem = (BubbleModel)context.DataItem; }
95+
@dataItem.Size
96+
</Template>
97+
</ChartTooltip>
98+
</TelerikChart>
99+
100+
<h3>All Series in Same Chart</h3>
101+
102+
<p>There is no need for additional hidden bubbles.</p>
103+
104+
<TelerikChart Width="70vw" Height="35vh">
105+
<ChartSeriesItems>
106+
<ChartSeries Type="ChartSeriesType.Bubble"
107+
Data="@SeriesData1.Take(SeriesData1.Count - 1)"
108+
XField="@nameof(BubbleModel.X)"
109+
YField="@nameof(BubbleModel.Y)"
110+
SizeField="@nameof(BubbleModel.Size)">
111+
</ChartSeries>
112+
<ChartSeries Type="ChartSeriesType.Bubble"
113+
Data="@SeriesData2"
114+
XField="@nameof(BubbleModel.X)"
115+
YField="@nameof(BubbleModel.Y)"
116+
SizeField="@nameof(BubbleModel.Size)">
117+
</ChartSeries>
118+
</ChartSeriesItems>
119+
<ChartTooltip Visible="true" Shared="true">
120+
<Template>
121+
@{ var dataItem = (BubbleModel)context.DataItem; }
122+
@dataItem.Size
123+
</Template>
124+
</ChartTooltip>
125+
</TelerikChart>
126+
127+
@code {
128+
private List<BubbleModel> SeriesData1 = new List<BubbleModel>() {
129+
new BubbleModel() { X = 50, Y = 100, Size = 100 },
130+
new BubbleModel() { X = 150, Y = 200, Size = 200 },
131+
new BubbleModel() { X = 250, Y = 300, Size = 300 },
132+
133+
// Size matches the max Size value in SeriesData2
134+
new BubbleModel() { X = -100, Y = -100, Size = 3000 }
135+
};
136+
137+
private List<BubbleModel> SeriesData2 = new List<BubbleModel>() {
138+
new BubbleModel() { X = 100, Y = 50, Size = 1000 },
139+
new BubbleModel() { X = 200, Y = 150, Size = 2000 },
140+
new BubbleModel() { X = 300, Y = 250, Size = 3000 }
141+
};
142+
143+
public class BubbleModel
144+
{
145+
public int X { get; set; }
146+
public int Y { get; set; }
147+
public int Size { get; set; }
148+
}
149+
}
150+
````
151+
152+
## See Also
153+
154+
* [Bubble Chart](slug:components/chart/types/bubble)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy