This is a migrated thread and some comments may be shown as answers.

Y Axis scale not dispalyed correctly

8 Answers 175 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

MBEN asked on 07 Nov 2013, 11:38 PM

Capture.PNG

Compatibility.PNG

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>

8 Answers, 1 is accepted

answered on 08 Nov 2013, 12:25 AM

Capture-LatestBuild.PNG

Chrome.PNG

Compatibility.PNG

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.

answered on 12 Nov 2013, 10:45 AM

RadHtmlChart-test.zip

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.

answered on 13 Nov 2013, 04:47 PM

IE7.PNG

IE9.PNG

Chrome.PNG

Firefox.PNG

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.

answered on 14 Nov 2013, 03:05 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Y Axis scale not dispalyed correctly

8 Answers, 1 is accepted