DxRangeSelectorChart Class

Defines a nested chart component in DxRangeSelector.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxRangeSelectorChart :
    DxComplexSettingsComponent<DxRangeSelectorChart, RangeSelectorChartModel>,
    IComponentContainer<IXYChartSeriesModel>,
    IModelProvider<RangeSelectorChartValueAxisModel>

Remarks

The DevExpress Blazor Range Selector component allows you to visualize data as a chart. Follow the steps below to display a chart:

1. Use the DxRangeSelector.Data property to bind the component to a data source.
2. Declare a DxRangeSelectorChart object.
3. Add an appropriate series object to the chart markup and populate the chart with arguments and values.

Show the Chart Structure

• DxRangeSelector
  • DxRangeSelectorChart
    • DxRangeSelectorChartValueAxis
    • Individual Series
      • DxChartSeriesPoint
        • DxChartSeriesPointImage
      • DxChartSeriesLabel
        • DxChartSeriesLabelConnector
        • DxChartFont
        • DxChartSeriesLabelBorder
      • DxChartSeriesValueErrorBar
      • DxChartAggregationSettings
      • DxChartSeriesLegendItem
        • DxChartSeriesLegendItem.TextTemplate
      • DxChartFinancialReduction (for financial series)

Run Demo

Series

The DxRangeSelectorChart component supports the same series types as the Blazor DxChart component. To create a series, choose a series type and specify its ArgumentField and ValueField properties.

The following code snippet creates a chart with bars where each bar corresponds to a country’s population (see the image above):

Razor

<DxRangeSelector Width="700px"
                 Height="300px"
                 Data="@Data">
    <DxTitleSettings Text="Population by Country, 2023" />
    <DxRangeSelectorChart>
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
</DxRangeSelector>

@code {
    List<PopulationPoint> Data;
    protected override void OnInitialized() {
        Data = GetData();
    }
}

DataSource

public List<PopulationPoint> GetData() {
    var result = new List<PopulationPoint>(14);
    result.Add(new PopulationPoint("India", 1428627663));
    result.Add(new PopulationPoint("China", 1425671352));
    result.Add(new PopulationPoint("United States", 339996563));
    result.Add(new PopulationPoint("Indonesia", 277534122));
    result.Add(new PopulationPoint("Pakistan", 240485658));
    result.Add(new PopulationPoint("Nigeria", 223804632));
    result.Add(new PopulationPoint("Brazil", 216422446));
    result.Add(new PopulationPoint("Bangladesh", 172954319));
    result.Add(new PopulationPoint("Russia", 144444359));
    result.Add(new PopulationPoint("Mexico", 128455567));
    result.Add(new PopulationPoint("Ethiopia", 126527060));
    result.Add(new PopulationPoint("Japan", 123294513));
    result.Add(new PopulationPoint("Philippines", 117337368));
    result.Add(new PopulationPoint("Egypt", 112716598));
    return result;
}

public class PopulationPoint {
    public string Country { get; set; }
    public long Value { get; set; }
    public PopulationPoint(string country, long value) {
        Country = country;
        Value = value;
    }
}

Refer to the following article for more information about available series types: Series Types in Blazor Charts.

Component-Level Settings

The DxRangeSelectorChart class includes properties that allow you to configure series-specific settings. The list below contains available options:

BarGroupPadding | BarGroupWidth

Specify the bar series appearance.

MinBubbleSize | MaxBubbleSize

Specify diameters of the smallest and biggest points (bubbles) in bubble series.

NegativesAsZeroes

Specifies whether DxRangeSelectorChart treats negative values as zeroes in stacked series.

You can also use TopIndent and BottomIndent properties to position a series on a chart pane. These properties define indents between the topmost/lowest series points and the background’s top/bottom edges.

Razor

<DxRangeSelector Width="500px"
                 Height="200px"
                 Data="@Data">
    <DxTitleSettings Text="Population by Country, 2023" />
    <DxRangeSelectorChart TopIndent="0.5" BottomIndent="0.5">
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
    <DxRangeSelectorBackground Color="#ebf9fa" />
</DxRangeSelector>

@code {
    List<PopulationPoint> Data;
    protected override void OnInitialized() {
        Data = GetData();
    }
}

DataSource

public List<PopulationPoint> GetData() {
    var result = new List<PopulationPoint>(14);
    result.Add(new PopulationPoint("India", 1428627663));
    result.Add(new PopulationPoint("China", 1425671352));
    result.Add(new PopulationPoint("United States", 339996563));
    result.Add(new PopulationPoint("Indonesia", 277534122));
    result.Add(new PopulationPoint("Pakistan", 240485658));
    result.Add(new PopulationPoint("Nigeria", 223804632));
    result.Add(new PopulationPoint("Brazil", 216422446));
    result.Add(new PopulationPoint("Bangladesh", 172954319));
    result.Add(new PopulationPoint("Russia", 144444359));
    result.Add(new PopulationPoint("Mexico", 128455567));
    result.Add(new PopulationPoint("Ethiopia", 126527060));
    result.Add(new PopulationPoint("Japan", 123294513));
    result.Add(new PopulationPoint("Philippines", 117337368));
    result.Add(new PopulationPoint("Egypt", 112716598));
    return result;
}

public class PopulationPoint {
    public string Country { get; set; }
    public long Value { get; set; }
    public PopulationPoint(string country, long value) {
        Country = country;
        Value = value;
    }
}

Axes

The Range Selector allows you to configure axes for the DxRangeSelectorChart component. You can use the following objects:

DxRangeSelectorChartValueAxis

Defines a value axis. This axis does not support visual elements (for example, ticks or labels) and does not include any nested components.

DxRangeSelectorScale

Defines a scale similar to a DxChartArgumentAxis object in the DxChart component. The scale supports multiple visual elements configurable with nested objects.

The DxRangeSelectorChart component automatically creates its axes based on the data type of the first series in the markup. You can also use DxRangeSelectorChartValueAxis.ValueType and DxRangeSelectorScale.ValueType properties to explicitly specify the axis data type.

The following code snippet casts values specified as strings to the Numeric type and customizes scale labels:

Razor

<DxRangeSelector Width="1200px"
                 Height="300px"
                 Data="@Data">
    <DxTitleSettings Text="Population by Country, 2023" />
    <DxRangeSelectorChart>
        <DxRangeSelectorChartValueAxis ValueType="ChartAxisDataType.Numeric" />
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
    <DxRangeSelectorScale>
        <DxRangeSelectorScaleLabel TopIndent="0">
            <DxFontSettings Weight="600" Color="#5f368d" Size="14" />
        </DxRangeSelectorScaleLabel>
    </DxRangeSelectorScale>
</DxRangeSelector>

@code {
    List<PopulationPoint> Data;
    protected override void OnInitialized() {
        Data = GetData();
    }
}

DataSource

public List<PopulationPoint> GetData() {
    var result = new List<PopulationPoint>(14);
    result.Add(new PopulationPoint("India", "1428627663"));
    result.Add(new PopulationPoint("China", "1425671352"));
    result.Add(new PopulationPoint("United States", "339996563"));
    result.Add(new PopulationPoint("Indonesia", "277534122"));
    result.Add(new PopulationPoint("Pakistan", "240485658"));
    result.Add(new PopulationPoint("Nigeria", "223804632"));
    result.Add(new PopulationPoint("Brazil", "216422446"));
    result.Add(new PopulationPoint("Bangladesh", "172954319"));
    result.Add(new PopulationPoint("Russia", "144444359"));
    result.Add(new PopulationPoint("Mexico", "128455567"));
    result.Add(new PopulationPoint("Ethiopia", "126527060"));
    result.Add(new PopulationPoint("Japan", "123294513"));
    result.Add(new PopulationPoint("Philippines", "117337368"));
    result.Add(new PopulationPoint("Egypt", "112716598"));
    return result;
}

public class PopulationPoint {
    public string Country { get; set; }
    public string Value { get; set; }
    public PopulationPoint(string country, string value) {
        Country = country;
        Value = value;
    }
}

Refer to DxRangeSelectorChartValueAxis and DxRangeSelectorScale class descriptions for more information about axes in the Range Selector.

Customization

This section describes settings that allow you to customize the appearance of the DxRangeSelectorChart component and its container.

Palette

The <DxRangeSelector> component allows you to create a custom palette for chart series. To apply a palette, assign it to the Palette property.

When the number of series exceeds the number of palette colors, you can use the PaletteExtensionMode property to specify how to extend the palette.

The following code snippet applies a custom palette to DxRangeSelectorChart series and changes the palette’s extension mode:

Razor

@using System.Linq.Expressions
<div style="display:flex;">
    <label style="padding-right:10px;padding-top:2px;">Palette Extension Mode:</label>
    <DxComboBox Data="Enum.GetValues<ChartPaletteExtensionMode>()"
                @bind-Value="@ExtensionMode" />
</div>

<DxRangeSelector Width="100%"
                 Data="@Data"
                 ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
    <DxRangeSelectorChart Palette="@Palette"
                          PaletteExtensionMode="@ExtensionMode">
        @CreateChartAreaSeries(s => s.Y1)
        @CreateChartAreaSeries(s => s.Y2)
        @CreateChartAreaSeries(s => s.Y3)
    </DxRangeSelectorChart>
    <DxRangeSelectorScale TickInterval="50" />
</DxRangeSelector>

@code {
    ChartPaletteExtensionMode ExtensionMode { get; set; } = ChartPaletteExtensionMode.Alternate;
    string[] Palette => new string[] { "#5f368d", "#28a745" };

    IEnumerable<RangePoint> Data = Enumerable.Empty<RangePoint>();
    protected override void OnInitialized() {
        Data = GenerateData();
    }

    private RenderFragment CreateChartAreaSeries(Expression<Func<RangePoint, double>> valueField) =>
        @<DxChartAreaSeries ArgumentField="@(s => s.Arg)"
                            ValueField="@(valueField)">
        </DxChartAreaSeries>
    ;
}

DataSource

public List<RangePoint> GenerateData() {
    return new List<RangePoint>() {
        new RangePoint { Arg = 10, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 20, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 40, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 50, Y1 = -39, Y2 = 50, Y3 = 19 },
        new RangePoint { Arg = 60, Y1 = -10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 75, Y1 = 10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 80, Y1 = 30, Y2 = 50, Y3 = 13 },
        new RangePoint { Arg = 90, Y1 = 40, Y2 = 50, Y3 = 14 },
        new RangePoint { Arg = 100, Y1 = 50, Y2 = 90, Y3 = 90 },
        new RangePoint { Arg = 105, Y1 = 40, Y2 = 175, Y3 = 120 },
        new RangePoint { Arg = 110, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 120, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 130, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 140, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 150, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 160, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 170, Y1 = -39, Y2 = 50, Y3 = 19 },
        new RangePoint { Arg = 180, Y1 = -10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 185, Y1 = 10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 190, Y1 = 30, Y2 = 100, Y3 = 13 },
        new RangePoint { Arg = 200, Y1 = 40, Y2 = 110, Y3 = 14 },
        new RangePoint { Arg = 210, Y1 = 50, Y2 = 90, Y3 = 90 },
        new RangePoint { Arg = 220, Y1 = 40, Y2 = 95, Y3 = 120 },
        new RangePoint { Arg = 230, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 240, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 255, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 270, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 280, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 290, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 295, Y1 = -39, Y2 = 50, Y3 = 19 },
        new RangePoint { Arg = 300, Y1 = -10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 310, Y1 = 10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 320, Y1 = 30, Y2 = 100, Y3 = 13 },
        new RangePoint { Arg = 330, Y1 = 40, Y2 = 110, Y3 = 14 },
        new RangePoint { Arg = 340, Y1 = 50, Y2 = 90, Y3 = 90 },
        new RangePoint { Arg = 350, Y1 = 40, Y2 = 95, Y3 = 120 },
        new RangePoint { Arg = 360, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 367, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 370, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 380, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 390, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 400, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 410, Y1 = -39, Y2 = 50, Y3 = 19 },
        new RangePoint { Arg = 420, Y1 = -10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 430, Y1 = 10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 440, Y1 = 30, Y2 = 100, Y3 = 13 },
        new RangePoint { Arg = 450, Y1 = 40, Y2 = 110, Y3 = 14 },
        new RangePoint { Arg = 460, Y1 = 50, Y2 = 90, Y3 = 90 },
        new RangePoint { Arg = 470, Y1 = 40, Y2 = 95, Y3 = 120 },
        new RangePoint { Arg = 480, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 490, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 500, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 510, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 520, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 530, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 540, Y1 = -39, Y2 = 50, Y3 = 19 },
        new RangePoint { Arg = 550, Y1 = -10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 555, Y1 = 10, Y2 = 10, Y3 = 15 },
        new RangePoint { Arg = 560, Y1 = 30, Y2 = 100, Y3 = 13 },
        new RangePoint { Arg = 570, Y1 = 40, Y2 = 110, Y3 = 14 },
        new RangePoint { Arg = 580, Y1 = 50, Y2 = 90, Y3 = 90 },
        new RangePoint { Arg = 590, Y1 = 40, Y2 = 95, Y3 = 12 },
        new RangePoint { Arg = 600, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 610, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 620, Y1 = -20, Y2 = 20, Y3 = 30 },
        new RangePoint { Arg = 630, Y1 = -12, Y2 = 10, Y3 = 32 },
        new RangePoint { Arg = 640, Y1 = -32, Y2 = 30, Y3 = 12 },
        new RangePoint { Arg = 650, Y1 = -20, Y2 = 20, Y3 = 30 }
    };
}
public class RangePoint {
    public int Arg { get; set; }
    public int Y1 { get; set; }
    public int Y2 { get; set; }
    public int Y3 { get; set; }
}

Background and Shutters

The Range Selector allows you to customize the chart’s background area. Use DxRangeSelectorBackground class properties to display an image or set the background color. You can also configure color settings for shutters that cover unselected ranges. To change the shutter color, use the DxRangeSelectorShutter.Color property.

The following code snippet sets the background color to #e3faf9 and the shutter color to #1bc2bb:

Razor

<DxRangeSelector Width="1200px"
                 Height="300px"
                 Data="@Data">
    <DxTitleSettings Text="Population by Country, 2023" />
    <DxRangeSelectorChart>
        <DxRangeSelectorChartValueAxis ValueType="ChartAxisDataType.Numeric" />
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
    <DxRangeSelectorBackground Color="#e3faf9" />
    <DxRangeSelectorShutter Color="#1bc2bb" />
</DxRangeSelector>

@code {
    List<PopulationPoint> Data;
    protected override void OnInitialized() {
        Data = GetData();
    }
}

DataSource

public List<PopulationPoint> GetData() {
    var result = new List<PopulationPoint>(14);
    result.Add(new PopulationPoint("India", "1428627663"));
    result.Add(new PopulationPoint("China", "1425671352"));
    result.Add(new PopulationPoint("United States", "339996563"));
    result.Add(new PopulationPoint("Indonesia", "277534122"));
    result.Add(new PopulationPoint("Pakistan", "240485658"));
    result.Add(new PopulationPoint("Nigeria", "223804632"));
    result.Add(new PopulationPoint("Brazil", "216422446"));
    result.Add(new PopulationPoint("Bangladesh", "172954319"));
    result.Add(new PopulationPoint("Russia", "144444359"));
    result.Add(new PopulationPoint("Mexico", "128455567"));
    result.Add(new PopulationPoint("Ethiopia", "126527060"));
    result.Add(new PopulationPoint("Japan", "123294513"));
    result.Add(new PopulationPoint("Philippines", "117337368"));
    result.Add(new PopulationPoint("Egypt", "112716598"));
    return result;
}

public class PopulationPoint {
    public string Country { get; set; }
    public string Value { get; set; }
    public PopulationPoint(string country, string value) {
        Country = country;
        Value = value;
    }
}

Refer to DxRangeSelectorBackground and DxRangeSelectorShutter class descriptions for more information and examples.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorChartModel>

DxComplexSettingsComponent<DxRangeSelectorChart, DevExpress.Blazor.Internal.RangeSelectorChartModel>

DxRangeSelectorChart