DxRangeSelectorChartValueAxis.Inverted Property

Specifies whether the DxRangeSelectorChartValueAxis is inverted.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool Inverted { get; set; }

Property Value

Type	Default	Description
Boolean	false	true to invert the axis; otherwise, false.

Remarks

Set the Inverted property to true to swap the minimum and maximum values of the DxRangeSelectorChartValueAxis. As a result, its values ascend in the opposite direction. The Range Selector also inverts DxRangeSelectorChart series.

The following code snippet inverts the value axis in the Range Selector’s chart:

Razor

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

@code {
    protected override void OnInitialized() {
        Data = RangeSelectorPointProvider.GetData();
    }

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

DataProvider

public interface IRangeSelectorPointProvider {
    public List<Point> GetData();
}

public class RangeSelectorPointProvider : IRangeSelectorPointProvider {
    public List<Point> GetData() {
        return new List<Point> {
            new Point { Arg = 10, Y1 = -12, Y2 = 10, Y3 = 32 },
            new Point { Arg = 20, Y1 = -32, Y2 = 30, Y3 = 12 },
            new Point { Arg = 40, Y1 = -20, Y2 = 20, Y3 = 30 },
            new Point { Arg = 50, Y1 = -39, Y2 = 50, Y3 = 19 },
            new Point { Arg = 60, Y1 = -10, Y2 = 10, Y3 = 15 },
            new Point { Arg = 75, Y1 = 10, Y2 = 10, Y3 = 15 },
            new Point { Arg = 80, Y1 = 30, Y2 = 50, Y3 = 13 },
            new Point { Arg = 90, Y1 = 40, Y2 = 50, Y3 = 14 },
            // ...
        };
    }
}

Point

public class Point {
    public int Arg { get; set; }
    public int Y1 { get; set; }
    public int Y2 { get; set; }
    public int Y3 { get; set; }
}