Skip to main content
All docs
V25.1
  • DxRangeSelectorChart.MaxBubbleSize Property

    Specifies the diameter of the biggest bubble in a bubble series.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue(0.2)]
    [Parameter]
    public double MaxBubbleSize { get; set; }

    Property Value

    Type Default Description
    Double 0.2

    The ratio between the biggest bubble’s diameter and the smaller chart side.

    Remarks

    The bubble diameter (size) in DxChartBubbleSeries<T, TArgument, TValue, TSize> is specified by the SizeField property. To calculate the diameter of the biggest bubble, the DxRangeSelectorChart component uses the following formula:

    d = MaxBubbleSize * min(height, width), where height and width are the sizes of the Range Selector’s background area.

    The following code snippet calculates the biggest bubble’s diameter based on the height of the Range Selector’s background area and changes the diameter of the smallest bubble:

    <DxRangeSelector Data="@chartsData"
                     Width="100%"
                     Height="300px">
        <DxTitleSettings Text="Correlation between Total Population and Population with Age over 60" />
        <DxRangeSelectorChart MaxBubbleSize="0.25"
                              MinBubbleSize="20">
            <DxChartBubbleSeries Name="Europe"
                                 T="PopulationCorrelationDataPoint"
                                 TArgument="double"
                                 TValue="double"
                                 TSize="double"
                                 ArgumentField="pc => pc.TotalPopulation"
                                 ValueField="pc => pc.Older60Population"
                                 SizeField="pc => pc.Older60Population / pc.TotalPopulation"
                                 Filter='pc => pc.Region == "Europe"' />
            <DxChartBubbleSeries Name="Africa"
                                 T="PopulationCorrelationDataPoint"
                                 TArgument="double"
                                 TValue="double"
                                 TSize="double"
                                 ArgumentField="pc => pc.TotalPopulation"
                                 ValueField="pc => pc.Older60Population"
                                 SizeField="pc => pc.Older60Population / pc.TotalPopulation"
                                 Filter='pc => pc.Region == "Africa"' />
            <DxRangeSelectorChartValueAxis MinValue="-5" MaxValue="50"/>
        </DxRangeSelectorChart>
        <DxRangeSelectorScale StartValue="6" EndValue="171" TickInterval="20">
            <DxRangeSelectorScaleLabel>
                <DxTextFormatSettings LdmlString="#0M" />
            </DxRangeSelectorScaleLabel>
            <DxRangeSelectorScaleMinorTick Visible="false" />
        </DxRangeSelectorScale>
    </DxRangeSelector>
    
    @code {
    IEnumerable<PopulationCorrelationDataPoint> chartsData;
    
        protected override async Task OnInitializedAsync() {
            chartsData = await PopulationCorrelation.GetData();
        }
    }
    
    See Also