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

Y Axis scale not dispalyed correctly

8 Answers 72 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 1
Veteran
MBEN asked on 07 Nov 2013, 11:38 PM
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

Sort by
0
MBEN
Top achievements
Rank 1
Veteran
answered on 08 Nov 2013, 12:25 AM
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 11 Nov 2013, 11:35 PM
Hi Telerik Team,

Any help on this?
0
Danail Vasilev
Telerik team
answered on 12 Nov 2013, 10:45 AM
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 13 Nov 2013, 04:47 PM
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 14 Nov 2013, 12:34 AM
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">
0
Danail Vasilev
Telerik team
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
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.
0
Jay Z
Top achievements
Rank 1
answered on 14 Apr 2014, 09:17 PM
[quote]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">
[/quote]
0
Jay Z
Top achievements
Rank 1
answered on 14 Apr 2014, 09:18 PM
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. 
Tags
Chart (HTML5)
Asked by
MBEN
Top achievements
Rank 1
Veteran
Answers by
MBEN
Top achievements
Rank 1
Veteran
Danail Vasilev
Telerik team
Jay Z
Top achievements
Rank 1
Share this question
or