Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

HtmlChart - Pie chart labels clipped in Chrome

11 Answers 162 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 24 Feb 2014, 02:43 PM
chrome.png
ie-10.png
I have an HtmlChart (Pie) that displays differently in IE10 and Chrome. In IE10, the labels for the slices on the left extend beyond the chart image while Chrome clips them at the edge of the image. Obviously, this is not something that can easily be handled. Just wanted to let you know about it.

I have attached relevant images.

11 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 27 Feb 2014, 06:02 AM
Hello Ed,

Could you send me a sample page, where the issue is reproduced? As we are unaware of such a problem, this will allow me to investigate the case and give you a suggestion for a workaround.

Regards,
Stamo Gochev
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Ed
Top achievements
Rank 1
answered on 28 Feb 2014, 04:22 PM
Here is a  sample page. The original width of the charts was 200 less and the height was 100 less.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OneInstallationOneDayPage.aspx.cs" Inherits="EnterpriseWeb.Html.Dashboard.OneInstallationOneDayPage" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
<%@ Register Assembly="EnterpriseWeb.RoamControls" Namespace="EnterpriseWeb.RoamControls"
 TagPrefix="cc1" %><!DOCTYPE html><html>
<head runat="server">
 <title></title>
 <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
  <StyleSheets>
   <telerik:StyleSheetReference Path="~/Styles/Common.css" />
   <telerik:StyleSheetReference Path="~/Styles/Dashboard/Dashboard.css" />
   <telerik:StyleSheetReference Path="~/Styles/Dashboard/OneInstallationOneDay.css" />
  </StyleSheets>
 </telerik:RadStyleSheetManager>
</head>
<body>
 <div style="width: 100%; height: 100%; overflow-y: auto">
  <form id="OneInstallationOneDayForm" runat="server">
   <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
     <asp:ScriptReference Path="~/Scripts/Common.js" />
     <asp:ScriptReference Path="~/Scripts/Dashboard/Dashboard.js" />
     <asp:ScriptReference Path="~/Scripts/Dashboard/OneInstallationOneDay.js" />
    </Scripts>
   </telerik:RadScriptManager>
   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
   </telerik:RadAjaxManager>
   <telerik:RadSkinManager ID="RadSkinManager1" runat="server" PersistenceMode="Cookie" />
   <asp:Panel ID="MainPanel" runat="server"></asp:Panel>
   <div id="SLMDiv" class="ModuleDiv">
    <div class="Center">
     <h3>Street Light Modules</h3>
    </div>
    <div class="ReportDiv">
     <telerik:RadGrid ID="SLMGrid" runat="server" CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
      Width="300px">
      <MasterTableView>
       <Columns>
        <telerik:GridBoundColumn DataField="InstallationId" DataType="System.Int16" Visible="false" UniqueName="InstallationId" />
        <telerik:GridBoundColumn DataField="ReportDate" DataType="System.DateTime" Visible="false" UniqueName="ReportDate" />
        <telerik:GridBoundColumn DataField="DeviceStatus" HeaderText="Device Status" SortExpression="DeviceStatus" UniqueName="DeviceStatus" />
        <telerik:GridBoundColumn DataField="DeviceCountLink" DataType="System.Int32" HeaderText="Device Count" SortExpression="DeviceCount"
         UniqueName="DeviceCount" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0}" />
       </Columns>
      </MasterTableView>
     </telerik:RadGrid>
    </div>
    <div class="ReportDiv">
     <telerik:RadHtmlChart ID="SLMChart" runat="server" Width="600" Height="500" Transitions="true">
      <Appearance>
       <FillStyle BackgroundColor="White" />
      </Appearance>
      <ChartTitle Text="" />
      <Legend>
       <Appearance BackgroundColor="White" Position="Right" Visible="true" />
      </Legend>
      <PlotArea>
       <Appearance>
        <FillStyle BackgroundColor="White" />
       </Appearance>
      </PlotArea>
     </telerik:RadHtmlChart>
    </div>
   </div>
   <div id="DCMDiv" class="ModuleDiv">
    <div class="Center">
     <h3>Dimmer Control Modules</h3>
    </div>
    <div class="ReportDiv">
     <telerik:RadGrid ID="DCMGrid" runat="server" CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
      Width="300px">
      <MasterTableView>
       <Columns>
        <telerik:GridBoundColumn DataField="InstallationId" DataType="System.Int16" Visible="false" UniqueName="InstallationId" />
        <telerik:GridBoundColumn DataField="ReportDate" DataType="System.DateTime" Visible="false" UniqueName="ReportDate" />
        <telerik:GridBoundColumn DataField="DeviceStatus" HeaderText="Device Status" SortExpression="DeviceStatus" UniqueName="DeviceStatus" />
        <telerik:GridBoundColumn DataField="DeviceCountLink" DataType="System.Int32" HeaderText="Device Count" SortExpression="DeviceCount"
         UniqueName="DeviceCount" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0}" />
       </Columns>
      </MasterTableView>
     </telerik:RadGrid>
    </div>
    <div class="ReportDiv">
     <telerik:RadHtmlChart ID="DCMChart" runat="server" Width="600" Height="500" Transitions="true">
      <Appearance>
       <FillStyle BackgroundColor="White" />
      </Appearance>
      <ChartTitle Text="" />
      <Legend>
       <Appearance BackgroundColor="White" Position="Right" Visible="true" />
      </Legend>
      <PlotArea>
       <Appearance>
        <FillStyle BackgroundColor="White" />
       </Appearance>
      </PlotArea>
     </telerik:RadHtmlChart>
    </div>
   </div>
   <div id="GatewayDiv" class="ModuleDiv">
    <div class="Center">
     <h3>Gateways</h3>
    </div>
    <div class="ReportDiv">
     <telerik:RadGrid ID="GatewayGrid" runat="server" CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
      Width="300px">
      <MasterTableView>
       <Columns>
        <telerik:GridBoundColumn DataField="InstallationId" DataType="System.Int16" Visible="false" UniqueName="InstallationId" />
        <telerik:GridBoundColumn DataField="ReportDate" DataType="System.DateTime" Visible="false" UniqueName="ReportDate" />
        <telerik:GridBoundColumn DataField="DeviceStatus" HeaderText="Device Status" SortExpression="DeviceStatus" UniqueName="DeviceStatus" />
        <telerik:GridBoundColumn DataField="DeviceCountLink" DataType="System.Int32" HeaderText="Device Count" SortExpression="DeviceCount"
         UniqueName="DeviceCount" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:###,###,##0}" />
       </Columns>
      </MasterTableView>
     </telerik:RadGrid>
    </div>
    <div class="ReportDiv">
     <telerik:RadHtmlChart ID="GatewayChart" runat="server" Width="600" Height="500" Transitions="true">
      <Appearance>
       <FillStyle BackgroundColor="White" />
      </Appearance>
      <ChartTitle Text="" />
      <Legend>
       <Appearance BackgroundColor="White" Position="Right" Visible="true" />
      </Legend>
      <PlotArea>
       <Appearance>
        <FillStyle BackgroundColor="White" />
       </Appearance>
      </PlotArea>
     </telerik:RadHtmlChart>
    </div>
   </div>
   <cc1:RoamWindowManager ID="RoamWindowManager1" runat="server" AutoSize="True"
    BackColor="AntiqueWhite" Behavior="Close" Behaviors="Close" EnableShadow="True"
    meta:resourcekey="RoamWindowManager1Resource1" Modal="True" ReloadOnShow="True"
    ShowContentDuringLoad="False" VisibleStatusbar="False">
    <Windows>
     <telerik:RadWindow ID="DashboardDetailWindow" runat="server"
      AutoSizeBehaviors="HeightProportional,WidthProportional"
      meta:resourcekey="DashboardDetailWindowResource1" />
    </Windows>
   </cc1:RoamWindowManager>
  </form>
 </div>
</body>
</html>
0
Ed
Top achievements
Rank 1
answered on 03 Mar 2014, 06:27 PM
ie-10.png
Having just installed the latest update (Q1 2014) the attached shows what is now being produced. Is there a new setting for making the slice labels show outside the pie?
0
Stamo Gochev
Telerik team
answered on 05 Mar 2014, 07:22 AM
Hello Ed,

The sample code from your previous answer uses basic RadHtmlChart declaration and I suppose that you are either databinding the chart or creating the series items programmatically. Could you send me your code behind file, so I can reproduce the problem on my side? If you are databinding the chart, could you replace your actual datasource with some hard-coded values, so that I can investigate the issue?

On your second question - you can check the available options for the label's position (Center, InsideEnd and OutsideEnd) in our demo in the "Sectors Settings" configurator. The OutsideEnd value might be applicable in your case.

Regards,
Stamo Gochev
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

0
Ed
Top achievements
Rank 1
answered on 05 Mar 2014, 01:45 PM
OutsideEnd is the default setting for the LabelsAppearance. It is having no effect, even when specified. Not sure what else can effect this.
I will look into getting you some data, but my time is short.
0
Stamo Gochev
Telerik team
answered on 06 Mar 2014, 06:02 AM
Pie-IE10-Clipped-Labels.zip
Hello Ed,

You can use the Margin property in the TextStyle tag in LabelsAppearance of your PieSeries like this:
<LabelsAppearance>
    <TextStyle Margin="10" />
</LabelsAppearance>
This should position the labels even further away from the boundaries of the pie chart. You can find more information about setting the Margin property in our help article.

If this doesn't work for you, could you modify the attached sample page, so I can reproduce your issue?

Regards,
Stamo Gochev
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

0
Ed
Top achievements
Rank 1
answered on 06 Mar 2014, 12:26 PM
Since the forum will only allow image files, how am I supposed to attach a project?
0
Stamo Gochev
Telerik team
answered on 07 Mar 2014, 07:59 AM
Hi Ed,

You are not allowed to attach a project in a forum thread, but you can either modify my sample code and insert it here as a code snippet here or send us a separate Support ticket, which allows you to attach files.

Note that your full project might not be necessary, so it will be very helpful if you can isolate the issue in a single page.

In addition, can you give me more information about the following things:
  1. Can you reproduce the issue with my sample page?
  2. What is the result of applying the Margin property in your project?
  3. Do you have any additional CSS definitions that can affect the chart appearance?
  4. Can you confirm that you are testing your project in IE 10 with Browser Mode: IE10 and Document Mode: Standards? You might have some issues if you are using the Compatibility view instead.

Regards,
Stamo Gochev
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

0
Ed
Top achievements
Rank 1
answered on 07 Mar 2014, 12:14 PM
1. I never saw a sample page from you.
2. The margin changed nothing.
3. I have no CSS entries that would effect this.
4. Yes, I am using IE10 with IE10 Standards

Here is my aspx file;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><!DOCTYPE><html>
<head runat="server">
 <title></title>
 <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
 <form id="form1" runat="server">
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
   <Scripts>
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
   </Scripts>
  </telerik:RadScriptManager>
  <script type="text/javascript">
  </script>
  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
  </telerik:RadAjaxManager>
  <div>
   <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="500" Transitions="true">
    <Appearance>
     <FillStyle BackgroundColor="White" />
    </Appearance>
    <ChartTitle Text="" />
    <Legend>
     <Appearance BackgroundColor="White" Position="Right" Visible="true" />
    </Legend>
    <PlotArea>
     <Appearance>
      <FillStyle BackgroundColor="White" />
     </Appearance>
     <Series>
      <telerik:PieSeries StartAngle="90">
       <LabelsAppearance Position="OutsideEnd" DataFormatString="{0:P3}">
        <TextStyle Margin="10" />
       </LabelsAppearance>
      </telerik:PieSeries>
     </Series>
    </PlotArea>
   </telerik:RadHtmlChart>
  </div>
 </form>
</body>
</html>

And here is my code behind:
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using Telerik.Web.UI;public partial class Default : System.Web.UI.Page
{
 protected void Page_Load ( object sender, EventArgs e )
 {
  this.BindData ( this.BuildData () );
 } private void BindData ( IEnumerable<OneInstallationOneDayRow> Items )
 {
  Decimal Sum = Items.Sum ( r => r.DeviceCount );
  PieSeries PS = new PieSeries ();
  PS.StartAngle = 90;
  PS.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.Center;
  PS.LabelsAppearance.DataFormatString = "{0:P2}";
  PS.TooltipsAppearance.DataFormatString = "{0:P2}";  foreach ( OneInstallationOneDayRow Row in Items )
  {
   if ( Row.DeviceCount > 0 )
   {
    PS.Items.Add ( new SeriesItem ()
    {
     BackgroundColor = this.GetColor ( Row.StatusId ),
     Name = Row.DeviceStatus,
     YValue = ( Decimal ) Row.DeviceCount / Sum,
     Exploded = true
    } );
   }
  }  this.RadHtmlChart1.PlotArea.Series.Add ( PS );
 } private List<OneInstallationOneDayRow> BuildData ()
 {
  List<OneInstallationOneDayRow> Entries = new List<OneInstallationOneDayRow> ();  for ( int i = 0; i < 9; i++ )
  {
   Entries.Add ( new OneInstallationOneDayRow ()
   {
    AssetTypeId = 1,
    DeviceCount = i * 10,
    DeviceStatus = this.GetStatus ( i ),
    InstallationId = 4,
    ReportDate = DateTime.Today,
    StatusId = i
   } );
  }  return Entries;
 } private String GetStatus ( Int32 StatusId )
 {
  switch ( StatusId )
  {
   case 2:
    return "Warnings";   case 3:
    return "Fixture Malfunction";   case 4:
    return "No Comm";   case 5:
    return "Extended No Comm";   case 6:
    return "Partial Report";   case 7:
    return "Unregistered";   case 8:
    return "No Power";   default:
    return "Normal";
  }
 } private Color GetColor ( Int32 StatusId )
 {
  switch ( StatusId )
  {
   case 2:
    return Color.Yellow;   case 3:
    return Color.Crimson;   case 4:
    return Color.DarkBlue;   case 5:
    return Color.Red;   case 6:
    return Color.Pink;   case 7:
    return Color.Wheat;   case 8:
    return Color.Turquoise;   default:
    return Color.LightGreen;
  }
 }
}

These are not the original files, but they do reproduce the problem on my computer.

0
Danail Vasilev
Telerik team
answered on 11 Mar 2014, 05:55 PM
RadHtmlChart-PieSeriesLabelsTest.zip
Hi Ed,

Thank you for providing us with a runnable sample.

Please find my comments and suggestions below:
  • LabelsAppearance.Position property is set twice - in the code behind and in the markup. Therefore the last value set in the code behind will take effect (i.e., PS.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.Center;). 
  • The labels of Pie chart can be positioned through the LabelsAppearance.Position property (i.e. Center, InsideEnd and OutsideEnd) of the series since Q1 2014. If you are not using the latest official version of Telerik UI - 2014.1.225, does upgrading to it fixes the issue with the Position property?
  • It seems that you are using the older SeriesItem collection. I can suggest that you use the corresponding series type (i.e., add PieSeriesItems to the SeriesItems). More information on the matter is available in Introducing the SeriesItems Collection in RadHtmlChart for ASP.NET AJAX blog post.
  • The issue with the overlapping series labels is not reproducible on my side. You can watch the short video test in the attached archive and then tell me if I am missing something. What I can suggest is that you:
    • Set a particular Margin for the PlotArea and compensate it with higher dimensions for the chart. This would let the chart have more space for its labels. Such an example is illustrated in the attached VS example. Note that the Margin property for the PlotArea is added in Q1 2014, so if you are not using this version you must upgrade to it.
    • If your version of Chrome is not the latest official one - 33.0.1750.146 m, does upgrading to it resolve the issue with the overlapping labels in Chrome?


Regards,
Danail Vasilev
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

0
Ed
Top achievements
Rank 1
answered on 11 Mar 2014, 06:49 PM
Danail,

You know how it is when you feel really stupid? Expand that!
I removed the setting on the code-behind for the labels.
As far as the SeriesItemCollection goes, I has tried it before but couldn't get it to compile. The problem was that it didn't like adding a PieSeriesItem to a PieSeries.Items; even though the interface says it should.

Thank you for you patience!
Tags
Chart (HTML5)
Asked by
Ed
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Ed
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or