Toggling visibility of line series combined with 100% stacked bar series makes a flickering

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 20 Jun 2022 14:56 by ADMIN

ADMIN

Danail Vasilev

Created on: 20 Nov 2015 08:29

Category: HtmlChart

Type: Bug Report

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>