Approved
Last Updated: 23 Nov 2015 10:09 by David
ADMIN
Danail Vasilev
Created on: 20 Nov 2015 08:29
Category: HtmlChart
Type: Bug Report
5
Toggling visibility of line series combined with 100% stacked bar series makes a flickering

		
1 comment
David
Posted on: 23 Nov 2015 10:09
Please Vote to help us get this resolved. Here is the description of the problem and then the code that allows this to be reproduced.

The issue is in the RadHtmlChart control.

The chart comprises of one stacked100 bar made with 3 series grouped together and then one lines series that uses a separate axis.

When the line is hidden or shown the right most series (in Green) gets clipped at the end of the bar (click the Line hide/un-hide icon in the legend repeatedly and the problem becomes obvious).

It appears as if the line's data is being included in the bar series(?) - or such like.

It looks awful in our customer facing application.
------------ CODE --------
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="BarBug.aspx.vb" Inherits="WebReport_Chapters_BarBug" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="scriptManager1" runat="server">
            <Scripts>
            </Scripts>
        </asp:ScriptManager>
        <div>
            <telerik:RadHtmlChart ID="WebReport_Chart" CssClass="WebReportChart" PlotArea-YAxis-MinValue="0" runat="server" >
                <ChartTitle Text ="Line included in bar scaling sums ?"></ChartTitle>
                <PlotArea>
                    <Series>
                        <telerik:BarSeries Name="Fav" StackType="Stack100" GroupName="Together">
                            <Items>
                                <telerik:SeriesItem YValue="88" />
                                <telerik:SeriesItem YValue="88" />
                                <telerik:SeriesItem YValue="88" />
                                <telerik:SeriesItem YValue="88" />
                                <telerik:SeriesItem YValue="88" />
                            </Items>
                        </telerik:BarSeries>
                    </Series>
                    <Series>
                        <telerik:BarSeries Name="Neutral" StackType="Stack100"  GroupName="Together">
                            <Items>
                                <telerik:SeriesItem YValue="10" />
                                <telerik:SeriesItem YValue="10" />
                                <telerik:SeriesItem YValue="10" />
                                <telerik:SeriesItem YValue="10" />
                                <telerik:SeriesItem YValue="10" />
                            </Items>
                        </telerik:BarSeries>
                    </Series>
                    <Series>
                        <teleri:BarSeries Name="Unfav"  StackType="Stack100"GroupName="Together">
                            <Items>
                                <telerik:SeriesItem YValue="2" />
                                <telerik:SeriesItem YValue="2" />
                                <telerik:SeriesItem YValue="2" />
                                <telerik:SeriesItem YValue="2" />
                                <telerik:SeriesItem YValue="2" />
                            </Items>
                        </telerik:BarSeries>
                    </Series>
                    <Series>
                        <telerik:LineSeries AxisName="Lines" Name="Line">
                            <Items>
                                <telerik:SeriesItem YValue=".10" />
                                <telerik:SeriesItem YValue=".50" />
                                <telerik:SeriesItem YValue=".60" />
                                <telerik:SeriesItem YValue=".70" />
                                <telerik:SeriesItem YValue=".80" />
                            </Items>
                        </telerik:LineSeries>
                    </Series>
                    <telerik:YAxis Name="Bars" Color="Orange" Width="3">
                    </telerik:YAxis>
                    <AdditionalYAxes>
                        <telerik:AxisY Name="Lines" MaxValue="1" MinValue="1">
                        </telerik:AxisY>
                    </AdditionalYAxes>
            </PlotArea>
            </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>