DxChart<T>.Rotated Property

Specifies whether the chart is rotated.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.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).

The following example creates two charts, binds them to the same data source, and rotates 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

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

Charts - Rotation