Y Axis scale not dispalyed correctly

9 posts, 0 answers
  1. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 07 Nov 2013 Link to this post

    I have a rad HTMLChart that is not displaying the Y Axis correctly in IE 9 and above. It also does not render correctly in Chrome. It overlaps the text.
    It runs fine if I run it in the compatibility mode.

    Attached are the two screenshots.
    I am setting the MaxValue for YAxis in codebehind and adding items to the chart as below:
    rcAnnualPaycheckDeduction.PlotArea.Series[0].Items.Add(Convert.ToDecimal(_estimatedPaycheckDeduction));
    rcAnnualPaycheckDeduction.PlotArea.Series[1].Items.Add(Convert.ToDecimal(Amount));

    <telerik:RadHtmlChart ID="rcPayPeriodPaycheckDeduction" runat="server" Width="355px"
                            Height="370px" Transitions="false" Visible="false">
                            <Legend>
                                <Appearance Position="Bottom" />
                            </Legend>
                            <ChartTitle Text="Per Pay Period">
                                <Appearance Align="Center" BackgroundColor="White" Position="Bottom"></Appearance>
                            </ChartTitle>
                            <PlotArea>
                                <YAxis MinValue="0" Step="2000">
                                    <LabelsAppearance DataFormatString="{0:$#,##0}" RotationAngle="0" />
                                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                                </YAxis>
                                <XAxis>
                                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                                </XAxis>
                                <Series>
                                    <telerik:ColumnSeries Name="Estimated Paycheck Deduction <b>*</b>" Stacked="false">
                                        <Appearance>
                                            <FillStyle BackgroundColor="Blue"></FillStyle>
                                        </Appearance>
                                        <LabelsAppearance DataFormatString="{0:$#,##0}" Position="OutsideEnd">
                                        </LabelsAppearance>
                                        <TooltipsAppearance DataFormatString="{0:$#,##0}"></TooltipsAppearance>
                                    </telerik:ColumnSeries>
                                    <telerik:ColumnSeries Name="Amount Deferred" Stacked="false">
                                        <Appearance>
                                            <FillStyle BackgroundColor="Green"></FillStyle>
                                        </Appearance>
                                        <LabelsAppearance DataFormatString="{0:$#,##0}" Position="OutsideEnd">
                                        </LabelsAppearance>
                                        <TooltipsAppearance DataFormatString="{0:$#,##0}"></TooltipsAppearance>
                                    </telerik:ColumnSeries>
                                </Series>
                            </PlotArea>
                        </telerik:RadHtmlChart>
  2. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 07 Nov 2013 Link to this post

    Update:

    I updated the controls to the latest internal build and attached is what I am getting now.
    It runs fine in compatibility mode in IE.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 11 Nov 2013 Link to this post

    Hi Telerik Team,

    Any help on this?
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Nov 2013 Link to this post

    Hi,

    I have tried to reproduce the mentioned issue with the RadHtmlChart in IE 10/9 and Chrome browsers but to no avail. You can watch the short video with the test and then tell me what I am missing?

    Note that the RadHtmlChart uses HTML 5 and therefore it doesn't support mixing different browser modes and document modes. More information on the supported browsers by RadControls can be found in Browser Support article.

    Can you confirm whether you are using the latest official version of RadControls - 2013.3.1015 and if not does upgrading to it resolve the issue?

    If the above step, however, is not helpful could you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that we can make an investigation locally?

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 13 Nov 2013 Link to this post

    Hi Danali,

    I tried working with this attached and it shows the same behavior.
    I have attached screenshots from different browsers.

    I haven't made any changes to the code. I am using the latest Telerik Build.

    Let me know if you need anything else from my side.
  7. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 13 Nov 2013 Link to this post

    Update:

    I removed the <b>*</b> tag from the html below and it seems to be rendering fine now.
    I am not sure why that was causing an issue.

    <telerik:ColumnSeries Name="Estimated Paycheck Deduction <b>*</b>" Stacked="false">
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 14 Nov 2013 Link to this post

    Hi,

    The possibility to use HTML content applies only for the tooltips. The labels are not HTML, but SVG text elements and therefore they do not support CSS, line breaks or other styling options HTML/CSS offer. More information on the matter is available in Handling Special Symbols help article.

    The exception is the older browser like IE7/IE8 or Compatibility view where the chart is not rendered as SVG but VML image, which in turns allows using HTML. Nevertheless using HTML in labels and titles of the RadHtmlChart is not recommended.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. Jay Z
    Jay Z avatar
    2 posts
    Member since:
    Oct 2012

    Posted 14 Apr 2014 in reply to MBEN Link to this post

    MBEN said:Update:

    I removed the <b>*</b> tag from the html below and it seems to be rendering fine now.
    I am not sure why that was causing an issue.

    <telerik:ColumnSeries Name="Estimated Paycheck Deduction <b>*</b>" Stacked="false">
  10. Jay Z
    Jay Z avatar
    2 posts
    Member since:
    Oct 2012

    Posted 14 Apr 2014 in reply to Jay Z Link to this post

    Thank you so much for this. I had a similar problem when using the drill-down feature. I was using <b></b> for the title in the code-behind and the HTMLCHART would fail to render. I would only get the raw values with no chart. I removed the HTML <b></b> and the drill-down worked without issues in IE10 and firefox. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017