DxChart<T>.Rotated Property

Specifies whether the chart is rotated.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public bool Rotated { get; set; }

Property Value

Type	Description
Boolean	true to rotate the chart; otherwise, false.

Remarks

Set the Rotated property to true to swap the argument (X) and value (Y) axes and display the X-axis vertically and the Y-axis horizontally. This property does not change axis functionality (the argument axis is still the X-axis, and the value axis is still the Y-axis).

Note

This property is not in effect for the Pie and Donut series.

The following example demonstrates how to create two charts bound to the same data source and rotate the second chart.

Razor

<DxChart Data="@GetData()">
    <DxChartTitle Text="@($"The loudness of sounds (no changes)")" />
    <DxChartLegend Visible="false" />
    <DxChartArgumentAxis Type="ChartAxisType.Discrete" />
    <DxChartValueAxis Type="ChartAxisType.Logarithmic" LogarithmBase="2" />
    <DxChartLineSeries ArgumentField="@((DataPoint s) => s.Argument)" ValueField="@((DataPoint s) => s.Value)" />
</DxChart>
<DxChart Data="@GetData()" Rotated="true">
    <DxChartTitle Text="@($"The loudness of sounds (swapped axes)")" />
    <DxChartLegend Visible="false" />
    <DxChartArgumentAxis Type="ChartAxisType.Discrete" />
    <DxChartValueAxis Type="ChartAxisType.Logarithmic" LogarithmBase="2" />
    <DxChartLineSeries ArgumentField="@((DataPoint s) => s.Argument)" ValueField="@((DataPoint s) => s.Value)" />
</DxChart>

Data Source

@code {
    List<DataPoint> GetData() {
        List<DataPoint> result = new List<DataPoint>(9);
        result.Add(new DataPoint("Whisper", 0.15));
        result.Add(new DataPoint("Street noise", 8));
        result.Add(new DataPoint("Jackhammer", 32));
        result.Add(new DataPoint("Subway train", 64));
        result.Add(new DataPoint("Loud music", 128));
        result.Add(new DataPoint("Pain threshold", 256));
        result.Add(new DataPoint("Buzzer", 512));
        result.Add(new DataPoint("Rocket start", 2048));
        result.Add(new DataPoint("Deadly level", 16348));
        return result;
    }

    struct DataPoint {
        public DataPoint (string argument, double value) { Argument = argument; Value = value; }
        public string Argument { get; set; }
        public double Value { get; set; }
    }
}

Online Demo

Charts - Rotation