Customizing Axes

[Vikas]

Hi
Is it possible to customize Y Axis for a Gantt (or rather any chart type) Chart like the images attached?

Thanks

Any Update?

[Giuseppe]

Hello Vikas,

RadChart supports only a single level/layer of axis item labels and it would not be possible to achieve the desired axis item label "grouping".


Greetings,
Freddie
the Telerik team

[Vikas]

Thanks for the reply.
But it is not a good news for me. :(
Ok. Can you please let me know if I can at least display y axis (or any axis) item's labels to appear between two major ticks? Currently they are appearing just above the Major tick. I need to show them between the current and next Major tick.

Hope this can be done at least!!! :)

[Giuseppe]

Hi Vikas,

You can customize the axis item label position manually like this:

ASPX

<telerik:RadChart ID="RadChart1" runat="server" SeriesOrientation="Horizontal" OnBeforeLayout="RadChart1_BeforeLayout">
    <Series>
        <telerik:ChartSeries Type="Bar">
            <Items>
                <telerik:ChartSeriesItem YValue="10" />
                <telerik:ChartSeriesItem YValue="20" />
                <telerik:ChartSeriesItem YValue="30" />
                <telerik:ChartSeriesItem YValue="40" />
                <telerik:ChartSeriesItem YValue="50" />
                <telerik:ChartSeriesItem YValue="60" />
                <telerik:ChartSeriesItem YValue="70" />
            </Items>
        </telerik:ChartSeries>
    </Series>
</telerik:RadChart>

C#

protected void RadChart1_BeforeLayout(object sender, EventArgs e)
{
    for (int i=0; i < RadChart1.PlotArea.YAxis.Items.Count; i++)
    {
        ChartAxisItem axisItem = RadChart1.PlotArea.YAxis.Items[i];
        axisItem.Appearance.Position.Auto = false;
        axisItem.Appearance.Position.X = 52 + i * 37;
        axisItem.Appearance.Position.Y = 270;

        if (i == RadChart1.PlotArea.YAxis.Items.Count - 1)
            axisItem.TextBlock.Visible = false;
    }
}

Sincerely yours,
Freddie
the Telerik team

[Vikas]

Thanks. I will give it a try. But I am not able to understand what are the factors used in following expressions.

52 + i * 37

I mean how do I calculate value in place of 52 and 37. I think these values will change according to the width and height of the graph and number of item shown on the axis. So, can you please provide me that relation?

[Giuseppe]

Hello Vikas,

Here is a sample code snippet that demonstrates the relation:

protected void RadChart1_BeforeLayout(object sender, EventArgs e)
{
    double chartWidth = RadChart1.Width.Value;

    double leftMarginPercent = RadChart1.PlotArea.Appearance.Dimensions.Margins.Left.Value;
    double leftMarginPixel = chartWidth * leftMarginPercent / 100;

    double rightMarginPercent = RadChart1.PlotArea.Appearance.Dimensions.Margins.Right.Value;
    double rightMarginPixel = chartWidth * rightMarginPercent / 100;

    double plotAreaWidth = chartWidth - (leftMarginPixel + rightMarginPixel);

    double axisItemWidth = plotAreaWidth / RadChart1.PlotArea.XAxis.Items.Count;
    double halfAxisItemWidth = axisItemWidth / 2;

    for (int i = 0; i < RadChart1.PlotArea.YAxis.Items.Count; i++)
    {
        ChartAxisItem axisItem = RadChart1.PlotArea.YAxis.Items[i];
        axisItem.Appearance.Position.Auto = false;
        axisItem.Appearance.Position.X = (float)((leftMarginPixel + halfAxisItemWidth - 10) + i * axisItemWidth);
        axisItem.Appearance.Position.Y = 270;

        if (i == RadChart1.PlotArea.YAxis.Items.Count - 1)
            axisItem.TextBlock.Visible = false;
    }
}

Sincerely yours,
Freddie
the Telerik team