How to make by bar chart axis direction be reversed

ejbiker93ss

created 11 days ago

I want to be able to make the chart be rtl or ltr. So the first bar should be 22 and the last one 1

Code
<DxChart T="ProductOnLane"
                 Data="@ChartsData"
                 Width="100%"
                 Height="100%"

                 RedrawOnResize>
            <DxChartBarSeries Name="@Machine"
                              T="ProductOnLane"
                              TArgument="int"
                              TValue="int"
                              ArgumentField="@(pasi => (int)pasi.LaneNumber)"
                              ValueField="@(pasi => pasi.PercentComplete)"
                              >
                              @* SummaryMethod="Enumerable.Sum"> *@
                <DxChartSeriesLabel Visible="true"
                                    Position="RelativePosition.Outside"
                                    BackgroundColor="System.Drawing.Color.Transparent" />
            </DxChartBarSeries>

            <DxChartTooltip Enabled="true"
                            Position="RelativePosition.Inside">
            </DxChartTooltip>
        </DxChart>

Clipboard-File-1.png

Answers approved by DevExpress Support

Gian Pascual (DevExpress Support)

created 11 days ago

Hi,

To invert the DxChartArgumentAxis (horizontal axis), you can enable the Inverted property.

Razor
<DxChart T="ProductOnLane"
                 Data="@ChartsData"
                 Width="100%"
                 Height="100%"

                 RedrawOnResize>
            <DxChartBarSeries Name="@Machine"
                              T="ProductOnLane"
                              TArgument="int"
                              TValue="int"
                              ArgumentField="@(pasi => (int)pasi.LaneNumber)"
                              ValueField="@(pasi => pasi.PercentComplete)"
                              >
                              @* SummaryMethod="Enumerable.Sum"> *@
                <DxChartSeriesLabel Visible="true"
                                    Position="RelativePosition.Outside"
                                    BackgroundColor="System.Drawing.Color.Transparent" />
            </DxChartBarSeries>

            <DxChartTooltip Enabled="true"
                            Position="RelativePosition.Inside">
            </DxChartTooltip>
            <DxChartArgumentAxis Inverted="true" />
</DxChart>

Let me know if this meets your requirements.

Regards,
Gian

Comments (2)

ejbiker93ss 10 days ago

Thats nice!

Could you tell me where to find that in the documentation?

I did some googling, but came up empty handed on this

Gian Pascual (DevExpress Support) 10 days ago

Hi,

You can find complete information on our Blazor components in the following help topic: Blazor Components | Blazor | DevExpress Documentation.

You can use the filter on the left side to search for a component. Each component includes a Members section where you can find all properties, methods, and events associated with that specific component.

For instance, you can find the Inverted property on the DxArgumentAxis Members page.

I hope this helps.

Regards,
Gian

How to make by bar chart axis direction be reversed

Answers approved by DevExpress Support

Recently viewed tickets