Set Specific Bubble Sizes

Environment

Product

Chart 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, 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.
2. Hide the dummy bubble:
   • Set the Min or Max parameter of <ChartXAxis> and <ChartYAxis>.
   • Position the bubble outside the visible Chart area (viewport).

Use comparable bubble sizes in several Charts

<h3>Hundreds</h3>

<p>An additional bubble with <code>Size</code> <strong>3000</strong> is positioned outside the visible Chart area.</p>

<TelerikChart Width="70vw" Height="35vh">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bubble"
                     Data="@SeriesData1"
                     XField="@nameof(BubbleModel.X)"
                     YField="@nameof(BubbleModel.Y)"
                     SizeField="@nameof(BubbleModel.Size)">
        </ChartSeries>
    </ChartSeriesItems>
    <ChartXAxes>
        <ChartXAxis Min="0" />
    </ChartXAxes>
    <ChartYAxes>
        <ChartYAxis Min="0" />
    </ChartYAxes>
    <ChartTooltip Visible="true" Shared="true">
        <Template>
            @{ var dataItem = (BubbleModel)context.DataItem; }
            @dataItem.Size
        </Template>
    </ChartTooltip>
</TelerikChart>

<h3>Thousands</h3>

<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>

<TelerikChart Width="70vw" Height="35vh">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bubble"
                     Data="@SeriesData2"
                     XField="@nameof(BubbleModel.X)"
                     YField="@nameof(BubbleModel.Y)"
                     SizeField="@nameof(BubbleModel.Size)">
        </ChartSeries>
    </ChartSeriesItems>
    <ChartXAxes>
        <ChartXAxis Min="0" />
    </ChartXAxes>
    <ChartYAxes>
        <ChartYAxis Min="0" />
    </ChartYAxes>
    <ChartTooltip Visible="true" Shared="true">
        <Template>
            @{ var dataItem = (BubbleModel)context.DataItem; }
            @dataItem.Size
        </Template>
    </ChartTooltip>
</TelerikChart>

<h3>All Series in Same Chart</h3>

<p>There is no need for additional hidden bubbles.</p>

<TelerikChart Width="70vw" Height="35vh">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bubble"
                     Data="@SeriesData1.Take(SeriesData1.Count - 1)"
                     XField="@nameof(BubbleModel.X)"
                     YField="@nameof(BubbleModel.Y)"
                     SizeField="@nameof(BubbleModel.Size)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Bubble"
                     Data="@SeriesData2"
                     XField="@nameof(BubbleModel.X)"
                     YField="@nameof(BubbleModel.Y)"
                     SizeField="@nameof(BubbleModel.Size)">
        </ChartSeries>
    </ChartSeriesItems>
    <ChartTooltip Visible="true" Shared="true">
        <Template>
            @{ var dataItem = (BubbleModel)context.DataItem; }
            @dataItem.Size
        </Template>
    </ChartTooltip>
</TelerikChart>

@code {
    private List<BubbleModel> SeriesData1 = new List<BubbleModel>() {
        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<BubbleModel> SeriesData2 = new List<BubbleModel>() {
        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