[OPEN] [#1623] [4.7.1] Bar series Labels doesn't hide after hiding it's bar sprite.

  1. #1

    [OPEN] [#1623] [4.7.1] Bar series Labels doesn't hide after hiding it's bar sprite.

    Click image for larger version. 

Name:	1.PNG 
Views:	2 
Size:	61.8 KB 
ID:	25239Click image for larger version. 

Name:	2.PNG 
Views:	3 
Size:	57.0 KB 
ID:	25240

    X.Panel()
            .Width(800)
            .Height(600)
            .Layout("fit")
            .TopBar(X.Toolbar()
                .Items(
                    X.ToolbarFill(),
    
                    X.Button()
                        .Text("Reload Data")
                        .Icon(Icon.ArrowRefresh)
                        .Handler("App.Store1.reload();"),
    
                    X.Button()
                        .Text("Save Chart")
                        .Icon(Icon.Disk)
                        .Handler("saveChart")
                )
            )
            .Items(X.CartesianChart()
                .Engine("Ext.draw.engine.Svg")
                .Store(X.Store()
                    .ID("Store1")
                    .Data(Model)
                    .Model(X.Model().Fields(f =>
                    {
                        f.Add(Html.X().ModelField().Name("Name"));
                        f.Add(Html.X().ModelField().Name("Data1"));
                        f.Add(Html.X().ModelField().Name("Data2"));
                        f.Add(Html.X().ModelField().Name("Data3"));
                        f.Add(Html.X().ModelField().Name("Data4"));
                    }))
                    .ServerProxy(X.AjaxProxy().Url(Url.Action("GetData")))
                )
                .Axes(
                    X.NumericAxis()
                        .Position(Position.Left)
                        .Fields(new string[] {"Data1", "Data2", "Data3", "Data4"})
                        .Grid(true)
                        .Title("Number of Hits")
                        .Minimum(0)
                        .Renderer(r => r.Handler="return Ext.util.Format.number(label, '0,0');"),
    
                    X.CategoryAxis()
                        .Position(Position.Bottom)
                        .Fields("Name")
                        .Title("Month of the Year")
                        .Label(X.ChartLabel().RotationDegrees(-45))
                )
                .LegendConfig(Html.X().ChartLegend().Dock(Dock.Top))
                .Series(X.BarSeries()
                    .Highlight(true)
                    .ShowMarkers(false)
                    .Stacked(false)
                    .XField("Name")
                    .YField(new string[] { "Data1", "Data2", "Data3", "Data4" })
                    .ShowInLegend(true)
                    .Tooltip(X.ChartTip()
                        .TrackMouse(true)
                        .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
                    )
                    .Label(X.ChartLabel()
                        .Display(SeriesLabelDisplay.InsideEnd)
                        .Field(new string[] { "Data1", "Data2", "Data3", "Data4" })
                        .Orientation(Orientation.Horizontal)
                        .Color("#333")
                        .TextAlign(TextSpriteAlign.Center)
                        .Renderer(r => r.Handler = "return Ext.util.Format.number(text, '0');")
                    )
                )
            )
    Please, suggest me what to do, how to clean those floating unnecessary labels. Reminding, that SVG engine is used.
    Thank you.
    Last edited by dilyu; Feb 08, 2019 at 7:44 AM.
  2. #2
    Hello @dilyu, and welcome to Ext.NET forums!

    Thanks for reporting the issue! Unfortunately your code sample misses what it takes to be run at once, so I can't be 100% sure I'm reproducing your issue here.

    I could get to something at least hopefully equal to what you claimed by making some minor changes to the Simple Bar Chart MVC example:
    - enable SVG engine by adding .Engine("Ext.draw.engine.Svg") to the CartesianChart around line 52
    - enable legend display by adding .LegendConfig(Html.X().ChartLegend().Dock(Dock.Top)) to the CartesianChart around line 52
    - change fields config to [var].Fields(new string[] { "Data1", "Data2" }) in the NumericAxis around line 94
    - add/replace the code below to the BarSeries around line 106:
    .Stacked(false)
    .YField(new string[] { "Data1", "Data2" })
    .Label(X.ChartLabel().Display(SeriesLabelDisplay.InsideEnd).Field("Data1"))
    We were also been able to reproduce the issue with pure Ext JS, so we have reported the issue upstream also, and created our own issue #1623 to track the defect.

    Ufortunately at the moment we have no workaround other than switching to the Canvas (default) chart engine. The Sencha Ext JS documentation claims the Canvas engine is generally faster, so this should be taken into consideration (in favor of switching to Canvas engine).

    We'll post a follow-up here as soon as we have an update aboute the issue!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks a lot for your reply, @fabricio.murta. Waiting for updates.

Similar Threads

  1. Replies: 4
    Last Post: Sep 13, 2016, 6:19 AM
  2. Replies: 3
    Last Post: Feb 02, 2015, 2:45 PM
  3. Replies: 5
    Last Post: Mar 11, 2014, 4:03 PM
  4. [OPEN] [#296] Charts - Bar labels show/hide
    By cwolcott in forum 2.x Premium Help
    Replies: 10
    Last Post: Jul 12, 2013, 5:40 AM
  5. [CLOSED] Text on Series and Tool tips for Grouped Bar Chart
    By WHISHWORKS in forum 2.x Premium Help
    Replies: 3
    Last Post: Jul 16, 2012, 11:59 AM

Tags for this Thread

Posting Permissions