How to enable XAxis gridlines for Gantt with horizontal series orientation

[Jerry]

I have a horizontal Gantt chart with a single series date data loaded for the two YAxis'. I'd like to be able to turn on the XAxis MajorGridLines so that a line appears from left side of the chart to right in order to make the XAxis item labels line up with the bars.

Is this possible?

My chart is below:

<telerik:RadChart ID="radchartPCSUserItems" Width="910" EnableViewState="False" runat="server" Skin="Web20"
        SeriesOrientation="Horizontal" Legend-Visible="false" AutoLayout="false">
    <Series>
        <telerik:ChartSeries Type="Gantt" Name="Series 1">
        </telerik:ChartSeries>
    </Series>
    <PlotArea Appearance-Dimensions-Width="700">
        <YAxis IsZeroBased="False" AutoScale="False">
            <Appearance MinorGridLines-Visible="false">
                <LabelAppearance RotationAngle="60" Position-AlignedPosition="top"></LabelAppearance>
            </Appearance>
        </YAxis>
        <YAxis2 IsZeroBased="False" AutoScale="False" >

        </YAxis2>

        <XAxis AutoScale="False" Step="10">
            <AxisLabel TextBlock-Text="Item"></AxisLabel>
            <Appearance MajorGridLines-Visible="true">
                <LabelAppearance Position-AlignedPosition="left"></LabelAppearance>
            </Appearance>
        </XAxis>
        <Appearance Dimensions-Margins="2px, 3px, 5px, 25%" Dimensions-Paddings="0%, 0%, 5px, 0%" ></Appearance>
    </PlotArea>
    <Legend Visible="False"></Legend>
    <Appearance Border-Visible="False"></Appearance>
    <ChartTitle Visible="False"></ChartTitle>
</telerik:RadChart>

My chart

private void BindGanttChart(PCSUserItemCollection pcsUserItemCol)
{
    DateTime dtMaxDate = pcsUserItemCol[0].DueDate;
    DateTime dtMinDate = pcsUserItemCol[0].StartDate;

    foreach(PCSUserItem useritem in pcsUserItemCol)
    {
        if (useritem.DueDate > dtMaxDate) // get the max date
        {
            dtMaxDate = useritem.DueDate;
        }

        if (dtMinDate > useritem.StartDate) // get the min date
        {
            dtMinDate = useritem.StartDate;
        }

        // Create the Chart Data Points
        Telerik.Charting.ChartSeriesItem chartItem = new Telerik.Charting.ChartSeriesItem();

        chartItem.YValue = useritem.StartDate.ToOADate();
        chartItem.YValue2 = useritem.DueDate.ToOADate();

        chartItem.Label.TextBlock.Text = useritem.DueDate.ToShortDateString();
        chartItem.Label.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font("Arial", 7, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point);

        chartItem.Name = useritem.ID.ToString();

        radchartPCSUserItems.Series[0].Items.Add(chartItem);

        // Set the X-Axis label's text
        Telerik.Charting.ChartAxisItem chartAxisItem = new Telerik.Charting.ChartAxisItem();
        chartAxisItem.TextBlock.Text = useritem.Title;

        radchartPCSUserItems.PlotArea.XAxis.Items.Add(chartAxisItem);
    }

    // Define the Chart MinVal, MaxVal & Step (Scale)
    if (dtMaxDate != DateTime.MinValue)
    {
        radchartPCSUserItems.PlotArea.YAxis.Step = 30;
        radchartPCSUserItems.PlotArea.YAxis.MinValue = dtMinDate.AddMonths(-1).ToOADate();
        radchartPCSUserItems.PlotArea.YAxis.MaxValue = dtMaxDate.AddDays(30).ToOADate();

        radchartPCSUserItems.PlotArea.YAxis2.Step = 30;
        radchartPCSUserItems.PlotArea.YAxis2.MinValue = dtMinDate.AddMonths(-1).ToOADate();
        radchartPCSUserItems.PlotArea.YAxis2.MaxValue = dtMaxDate.AddDays(30).ToOADate();
    }

    radchartPCSUserItems.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
    radchartPCSUserItems.DataBind();
}

[Ves]

Hi Jerry,

I am not sure I followed you question completely. Do you need to modify the positioning of X axis labels? You can check the Layout section in this help topic. It shows vertical chart, but the feature would work in the same way for the horizontal ones. If that does not seem to help, please send us an image of the chart you get and an example (might be a simple scratch) that shows the expected result.

Best regards,
Ves
the Telerik team

[Jerry]

The positioning is fine. We just want veritical and horizontal gridlines so that chart is easier to read.

My rendered chart looks like ChartImage.png.

We would like the chart to look similar to ChartImageWithXLines.png.

[Ves]

Hi Jerry,

Thank you for the additional detail. Your code shows that you have already set the MajorGridLines to be visible. However, the appearance of the gridlines is influenced by the skin used, so you will need to add a bit to their configuration. You need to set the width and according to the image -- the PenStyle:

<XAxis>
     <Appearance MajorGridLines-Visible="true" MajorGridLines-Width="2" MajorGridLines-PenStyle="Solid">

Best regards,
Ves
the Telerik team