From 2eb0b51abbbd1588b9a782c90344ec537f1de355 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 17 Jul 2025 13:39:31 +0300 Subject: [PATCH] kb(Chart): Add KB for bubble sizing in multiple Charts --- components/chart/types/bubble.md | 33 +++--- knowledge-base/chart-bubble-size.md | 154 ++++++++++++++++++++++++++++ 2 files changed, 175 insertions(+), 12 deletions(-) create mode 100644 knowledge-base/chart-bubble-size.md diff --git a/components/chart/types/bubble.md b/components/chart/types/bubble.md index cafc079f78..f88519b0cf 100644 --- a/components/chart/types/bubble.md +++ b/components/chart/types/bubble.md @@ -18,18 +18,17 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) -#### To create a bubble chart: +## Creating a Blazor Bubble Chart -1. add a `ChartSeries` to the `ChartSeriesItems` collection -2. set its `Type` property to `ChartSeriesType.Bubble` -3. provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size +To use a Chart component with Bubble series: +1. Add a `ChartSeries` to the `ChartSeriesItems` collection. +2. Set its `Type` property to `ChartSeriesType.Bubble`. +3. Provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size. >caption A bubble chart that shows projected population change on a plot of life expectancy versus fertility rate ````RAZOR -@* Bubble Series *@ - @@ -90,9 +89,22 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g new ModelData() { LifeExpectancy = 74.3, FertilityRate = 1.85, PopulationChange = 3000000, Country = "Great Britain" } }; } - ```` +## Bubble Sizing + +The Chart component determines the physical size of each bubble automatically: + +* 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. +* 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. +* All bubble sizes are set proportionately, as long as they comply with the preceding rules. + +As a result of the above algorithms: + +* 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. +* 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. + +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. ## Bubble Chart Specific Appearance Settings @@ -102,10 +114,8 @@ The color of a series is controlled through the `Color` property that can take a 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. - @[template](/_contentTemplates/chart/link-to-basics.md#opacity-area-bubble) - ### Negative Values 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 } ```` - @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-numerical) - ## See Also - * [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart) +* [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart) +* [Configure Relative Bubble Sizes in Multiple Charts](slug:chart-kb-bubble-size) diff --git a/knowledge-base/chart-bubble-size.md b/knowledge-base/chart-bubble-size.md new file mode 100644 index 0000000000..3204267031 --- /dev/null +++ b/knowledge-base/chart-bubble-size.md @@ -0,0 +1,154 @@ +--- +title: Set Specific Bubble Sizes +description: Learn how to define bubble sizes in different Charts that users can compare more easily. +type: how-to +page_title: How to Set Specific Bubble Sizes +slug: chart-kb-bubble-size +tags: telerik, blazor, chart, bubble +ticketid: 1693133 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductChart for Blazor
+ +## Description + +This KB answers the following questions: + +* How to display smaller bubbles for smaller values in a specific Telerik Blazor Chart instance? +* How to help users compare bubble sizes for different data in different Charts? +* How to display all bubbles with a specific defined `Size` value in certain dimensions? +* How to use fixed bubble sizes instead of relative? + +## Solution + +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. + +To display comparable bubble sizes in multiple Charts: + +1. Use an additional dummy data item with a `Size` value that matches the largest value in all involved Chart instances. +1. Hide the dummy bubble: + * Set the `Min` or `Max` parameter of `` and ``. + * Position the bubble outside the visible Chart area (viewport). + +>caption Use comparable bubble sizes in several Charts + +````RAZOR +

Hundreds

+ +

An additional bubble with Size 3000 is positioned outside the visible Chart area.

+ + + + + + + + + + + + + + + + + +

Thousands

+ +

The max Size value is 3000. This is the max value in all Charts and series, so there is no need for additional hidden bubbles.

+ + + + + + + + + + + + + + + + + +

All Series in Same Chart

+ +

There is no need for additional hidden bubbles.

+ + + + + + + + + + + + + +@code { + private List SeriesData1 = new List() { + new BubbleModel() { X = 50, Y = 100, Size = 100 }, + new BubbleModel() { X = 150, Y = 200, Size = 200 }, + new BubbleModel() { X = 250, Y = 300, Size = 300 }, + + // Size matches the max Size value in SeriesData2 + new BubbleModel() { X = -100, Y = -100, Size = 3000 } + }; + + private List SeriesData2 = new List() { + new BubbleModel() { X = 100, Y = 50, Size = 1000 }, + new BubbleModel() { X = 200, Y = 150, Size = 2000 }, + new BubbleModel() { X = 300, Y = 250, Size = 3000 } + }; + + public class BubbleModel + { + public int X { get; set; } + public int Y { get; set; } + public int Size { get; set; } + } +} +```` + +## See Also + +* [Bubble Chart](slug:components/chart/types/bubble)