DxRangeSelectorChart.PaletteExtensionMode Property

Specifies how to extend the chart‘s palette when the number of colors is less than the number of series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ChartPaletteExtensionMode.Blend)]
[Parameter]
public ChartPaletteExtensionMode PaletteExtensionMode { get; set; }

Property Value

Type	Default	Description
ChartPaletteExtensionMode	Blend	An enumeration value.

Available values:

Name	Description
Alternate	Repeats the full set of palette colors alternating their normal, lightened, and darkened shades in that order.
Blend	Blends two adjacent colors and inserts the new color between these colors in the palette.
Extrapolate	Repeats the full set of palette colors changing their shades gradually from dark to light.

Remarks

Use the PaletteExtensionMode property to specify how to extend the DxRangeSelectorChart palette specified by the Palette property.

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