none
Axis Label cut offs

    Question

  • Hi guys,

    I have been putting together a chart that combines multiple chart areas to create some side-by-side bar charts. Each bar chart shares the same set of labels, so I have been trying to put together the following chart:



    However, the moment I modify the InnerPlotPosition of the first chart, to match the sizing and positioning of the other charts, the axis labels stop resizing propertly, and get cut off as seen above. All the axis have IsLabelAutoFit = True, and the resizing works fine if I don't alter the InnerPlotPosition - alas, I get a wrongly sized plot area which doesn't match the rest of the other chart areas.

    Is this a known issue with the charting component, or should I be doing something to force the recalculation of the axis label sizes?


    Regards,
    Alvaro
    • Edited by Alvy Tuesday, November 24, 2009 10:36 AM added detail
    Tuesday, November 24, 2009 10:35 AM

Answers

  • Couple thoughts:

    1) Your axis labels are too long and you should consider ways to render them differently. Possible solutions:
      - Use short label and place additional information into a tooltip.
      - You can try placing text inside the plotting area, so that it will be displayed on top of the bars. You can achieve that using annotations that anchored to the axis value and span across multiple chart areas.

    2) Avoid setting InerPlotPosition. Not sure exactly why you need it but in many cases you can use Chart Area Alignment feature instead.

    Alex.
    http://blogs.msdn.com/alexgor
    Thursday, December 10, 2009 5:20 PM
    Owner

All replies

  • Can you please upload the image again for better understanding?
    Tuesday, November 24, 2009 12:26 PM
  • Hi Dhruv,

    The image can be seen at:

    http://www.haushinka.org/media/ChartImg.png

    This is the direct image generated by the Charting framework, with the labels on the left being cut off.


    Regards,
    Alvaro
    Tuesday, November 24, 2009 12:38 PM
  • I have managed to reproduce my problem on a much simpler bar chart.

    Below is the markup used for creating my example bar chart:

       <asp:Chart runat="server" ID="Chart1" Width="600" Height="300">
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisX IsLabelAutoFit="True">
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
            <Series>
                <asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Bar">
                    <Points>
                        <asp:DataPoint AxisLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue sapien tortor, sed feugiat metus. Quisque id turpis a enim convallis sodales. Lorem ipsum" YValues="2" />
                        <asp:DataPoint AxisLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue sapien tortor, sed feugiat metus. Quisque id turpis a enim convallis sodales. Lorem ipsum" YValues="4" />
                        <asp:DataPoint AxisLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue sapien tortor, sed feugiat metus. Quisque id turpis a enim convallis sodales. Lorem ipsum" YValues="5" />
                        <asp:DataPoint AxisLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue sapien tortor, sed feugiat metus. Quisque id turpis a enim convallis sodales. Lorem ipsum" YValues="3" />
                        <asp:DataPoint AxisLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue sapien tortor, sed feugiat metus. Quisque id turpis a enim convallis sodales. Lorem ipsum" YValues="1" />
                    </Points>
                </asp:Series>
            </Series>
        </asp:Chart>

    If you run the ASP.NET page with just the above, it looks like this:



    http://www.haushinka.org/media/Series1.png

    I then add the following code in the code-behind file:

            protected void Page_Load(object sender, EventArgs e)
            {
                Chart1.ChartAreas[0].Position.X = 5;
                Chart1.ChartAreas[0].Position.Y = 5;
                Chart1.ChartAreas[0].Position.Width = 90;
                Chart1.ChartAreas[0].Position.Height = 90;
            }

    This makes the graph look like this:



    http://www.haushinka.org/media/Series2.png

    Which is fine, a bit squashed but the axis labels are still being handled correctly.

    However, I then add my InnerPlotPosition, so the code looks like this:

            protected void Page_Load(object sender, EventArgs e)
            {
                Chart1.ChartAreas[0].Position.X = 5;
                Chart1.ChartAreas[0].Position.Y = 5;
                Chart1.ChartAreas[0].Position.Width = 90;
                Chart1.ChartAreas[0].Position.Height = 90;
    
                Chart1.ChartAreas[0].InnerPlotPosition.X = 50;
                Chart1.ChartAreas[0].InnerPlotPosition.Y = 5;
                Chart1.ChartAreas[0].InnerPlotPosition.Width = 30;
                Chart1.ChartAreas[0].InnerPlotPosition.Height = 90;
            }

    At this point, the auto fit stops working altogether, and looks like this:



    http://www.haushinka.org/media/Series3.png

    Notice that the beginning of the data points should read "Lipsum" but they don't.

    Does anyone have any explanations as to why the label auto fit stops working when modifying the InnerPlotPosition properties?


    Regards,
    Alvaro
    Tuesday, November 24, 2009 10:32 PM
  • Couple thoughts:

    1) Your axis labels are too long and you should consider ways to render them differently. Possible solutions:
      - Use short label and place additional information into a tooltip.
      - You can try placing text inside the plotting area, so that it will be displayed on top of the bars. You can achieve that using annotations that anchored to the axis value and span across multiple chart areas.

    2) Avoid setting InerPlotPosition. Not sure exactly why you need it but in many cases you can use Chart Area Alignment feature instead.

    Alex.
    http://blogs.msdn.com/alexgor
    Thursday, December 10, 2009 5:20 PM
    Owner