[CLOSED] Chart axis label alignment

[dataworks]

Is there a way to align the labels on the x axis toward the center of the bars? Thanks

[Daniil]

Hi @dataworks,

I think it should be center aligned by default, as here:
https://examples2.ext.net/#/Chart/Column/Basic/

It is difficult to say, why it is not for you.

[dataworks]

I cant seem to find what im doing wrong. Can you please help me out

                                <ext:Chart 
                                    ID="chrtTransferencias" 
                                    runat="server"
                                    StyleSpec="background:#fff;"                   
                                    StandardTheme="Category1"
                                    Animate="true">
                                    <Store>
                                        <ext:Store ID="storeTransferencias" 
                                            runat="server" 
                                            AutoDataBind="true">                           
                                            <Model>
                                                <ext:Model ID="Model4" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="SHORT_PERIOD" />
                                                        <ext:ModelField Name="QTY_MIN" />
                                                        <ext:ModelField Name="QTY_MAX" />
                                                        <ext:ModelField Name="QTY" />
                                                        <ext:ModelField Name="VOL_MIN" />
                                                        <ext:ModelField Name="VOL_MAX" />
                                                        <ext:ModelField Name="VOL" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Axes>
                                        <ext:NumericAxis Fields="QTY_MIN,QTY_MAX,QTY" Title="Quantity" Grid="true" />
                                        <ext:CategoryAxis Position="Bottom" Fields="SHORT_PERIOD" Title="Months" />
                                    </Axes>
                                    <Series>
                                        <ext:LineSeries Axis="Left" Smooth="3" Fill="false" XField="SHORT_PERIOD" YField="QTY_MIN" />
                                        <ext:LineSeries Axis="Left" Smooth="3" Fill="false" XField="SHORT_PERIOD" YField="QTY_MAX" />
                                        <ext:ColumnSeries Axis="Left" XField="SHORT_PERIOD" YField="QTY" Highlight="true">
                                            <Label Display="InsideEnd" Field="QTY" Orientation="Horizontal" Color="#000">
                                                <Renderer Handler="if (item.series.label.field == 'VOL') { return Ext.util.Format.usMoney(value); } else { return value; }" />
                                            </Label>
                                        </ext:ColumnSeries>
                                    </Series>
                                </ext:Chart>

[Daniil]

Please provide a full standalone test case to reproduce the problem.

[dataworks]

Thanks for the help

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "JAN", 10, 20, 5 },
                new object[] { "FEB", 10, 20, 8 },
                new object[] { "MAR", 10, 20, 35 },
                new object[] { "APR", 10, 20, 14 },
                new object[] { "MAY", 10, 20, 10 },
                new object[] { "JUN", 10, 20, 19 }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel
            runat="server"
            Header="false"
            Border="false"
            Width="400"
            Height="300"
            Layout="FitLayout">
            <Items>
                <ext:Chart
                    runat="server"
                    StyleSpec="background:#fff;"
                    StandardTheme="Category1"
                    Animate="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                        <ext:ModelField Name="Data2" />
                                        <ext:ModelField Name="Data3" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis Fields="Data1,Data2,Data3" Title="Transfers" Grid="true" />
                        <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Months" />
                    </Axes>
                    <Series>
                        <ext:LineSeries Axis="Left" Smooth="3" Fill="false" XField="Name" YField="Data1" />
                        <ext:LineSeries Axis="Left" Smooth="3" Fill="false" XField="Name" YField="Data2" />
                        <ext:ColumnSeries Axis="Left" XField="Name" YField="Data3" />
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>

[Daniil]

Thank you. I've put the code behind directly into the .aspx page. It is easier for us to test.

I've reproduced the problem. For some reason the labels shift because of the LineSeries. If remove the LineSeries, the labels are aligned properly. I will try to find out the reason of that.

[Daniil]

I've not found the reason, but I've found a simple workaround. Please put the ColumnSeries first:

<Series>
    <ext:ColumnSeries Axis="Left" XField="Name" YField="Data3" />
    <ext:LineSeries Axis="Left" Smooth="3" Fill="false" XField="Name" YField="Data1" />
    <ext:LineSeries Axis="Left" Smooth="3" Fill="false" XField="Name" YField="Data2" />
</Series>

It appears to help.

[dataworks]

Wow. Why didnt i try that. It works, thanks! :)