DxRangeSelectorChart.Palette Property

Specifies the color scheme for DxRangeSelectorChart series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string[] Palette { get; set; }

Property Value

Type	Description
String[]	An array of colors.

Remarks

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

The Palette property accepts the following formats:

• Longhand and shorthand hexadecimal color values: #ffff00, #ff0.
• RGB and RGBA color codes: rgb(255, 0, 0), rgba(0, 230, 0, 0.3).
• HTML color name (case-insensitive): red, DarkGreen.

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