Skip to main content
All docs
V25.1
  • 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.v25.1.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:

    Range Selector - Chart Palette

    @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>
        ;
    }
    
    See Also