[CLOSED] Label display in bar charts

  1. #1

    [CLOSED] Label display in bar charts

    Hi Sir,

    Here is my Requirement..

    I'm displaying the chart label in bar chart and displaying the same as expected but I'm facing problem with count is zero.

    I don't want to display the label in bar chart if count value is Zero (Currently its displaying "-0".

    I’ve tried changing the 0 to empty string in the data, but the chart still includes the “-“. Need to remove "-" string.

    Is there any way to remove this. Here is screen shot for your reference.I have high lighted with red color.

    Click image for larger version. 

Name:	chart.png 
Views:	78 
Size:	31.4 KB 
ID:	25244


    Thank you,
    Vamsi
    Attached Thumbnails Click image for larger version. 

Name:	chart.png 
Views:	75 
Size:	27.3 KB 
ID:	25245  
    Last edited by fabricio.murta; Mar 12, 2019 at 12:53 AM.
  2. #2
    Hello @vamsi!

    Can you provide a simplified test case reproducing the situation you're facing? I'm not sure how you are getting those "-0"s.

    As a blind shot, you may try replacing empty string to either a space character or a  , but it is still not clear how is it your chart that you're getting the '-' characters in the label values. I believe you can properly handle the output of the label with a renderer like it is done in this example: Charts > Bar > Renderer.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for your reply and please see my screen shot as well.

    Here is sample code : if you see screen my shot I have high light the issue (0
    |) and please I don't want to small vertical line below the 0 Number in X axis.

    Click image for larger version. 

Name:	Chart1.png 
Views:	72 
Size:	22.5 KB 
ID:	25246

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public List<object> Data
        {
            get
            {
                return new List<object>
                {
                    new { Month = "Jan", Data1 = 0, Data2 = 37, Data3 = 35, Data4 = 4 },
                    new { Month = "Feb", Data1 = 20, Data2 = 37, Data3 = 36, Data4 = 5 },
                    new { Month = "Mar", Data1 = 0, Data2 = 36, Data3 = 37, Data4 = 4 },
                    new { Month = "Apr", Data1 = 18, Data2 = 36, Data3 = 38, Data4 = 5 },
                    new { Month = "May", Data1 = 18, Data2 = 35, Data3 = 39, Data4 = 4 },
                    new { Month = "Jun", Data1 = 0, Data2 = 34, Data3 = 42, Data4 = 4 },
                    new { Month = "Jul", Data1 = 16, Data2 = 34, Data3 = 43, Data4 = 4 },
                    new { Month = "Aug", Data1 = 16, Data2 = 33, Data3 = 44, Data4 = 4 },
                    new { Month = "Sep", Data1 = 16, Data2 = 32, Data3 = 44, Data4 = 4 },
                    new { Month = "Oct", Data1 = 16, Data2 = 32, Data3 = 45, Data4 = 4 },
                    new { Month = "Nov", Data1 = 15, Data2 = 31, Data3 = 46, Data4 = 4 },
                    new { Month = "Dec", Data1 = 15, Data2 = 31, Data3 = 47, Data4 = 4 }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Stacked Bar Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Stacked Bar Chart Sample</h1>
    
            <p>Stacked bars are multi-series bar charts where categories are stacked next to each</p>
            <p>other. This is typically done to visually represent the total of all categories for a</p>
            <p>given period or value.</p>
    
            <ext:Container
                runat="server"
                Width="800"
                Height="500"
                Layout="FitLayout">
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server">
                        <Store>
                            <ext:Store runat="server" Data="<%# Data %>" AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data1" />
                                            <ext:ModelField Name="Data2" />
                                            <ext:ModelField Name="Data3" />
                                            <ext:ModelField Name="Data4" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <LegendConfig Dock="Right" />
    
    
    
                        <Axes>
                            <ext:NumericAxis
                                Fields="Data1"
                                Position="Left"
                                Grid="true"
                                AdjustByMajorUnit="true"
                                Minimum="0">
                                <Renderer Handler="return label + '%';" />
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis Fields="Month" Position="Bottom" Grid="true" />
                        </Axes>
    
                        <Series>
                            <ext:BarSeries
                                XField="Month"
                                YField="Data1"
                                Titles="IE"
                                Stacked="true">
                                <StyleSpec>
                                    <ext:Sprite Opacity="0.8" />
                                </StyleSpec>
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="yellow" />
                                </HighlightConfig>
                                <Label
                                    Display="InsideEnd"
                                    Field="Data1"
                                    Orientation="Horizontal"
                                    Color="#333"
                                    TextAlign="Center">
                                    <Renderer Handler="return Ext.util.Format.number(text, '0,0');" />
                                </Label>
    
                            </ext:BarSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
  4. #4
    Hello @Vamsi!

    Thanks, now I see what you mean from the screenshot, and the example is perfect! I think I figured out what you need. Here's what I suggest you to change:

    1. Move the renderer to an external function (cosmetic, just helps reading and making changes to the code when needed). I came up with this client-side function:

    var renderLabel = function (text, sprite, config, rendererData, index) {
        if (text === 0) {
            return { hidden: true };
        } else {
            return { hidden: false, text: Ext.util.Format.number(text, '0,0') };
        }
    }
    2. Reference the handler from the renderer tag:

    <Renderer Fn="renderLabel" />
    According to the documentation, the renderer method can return an Object or string (documentation on Ext.chart.series.Bar.label.renderer). And when it returns an object, the object describes which changes you want to apply to that specific label sprite. If you return a string, it will bind that string to the label's text, no matter what it is. And as the bar is empty, it draws a line pointing to where the "outside" value (outside the bar paint area) would be.

    So in the solution above, I return from the renderer a change either telling the label sprite should be hidden or if it's not hidden and the mangled text I want. Notice if I hide label from a bar, the next one will inherit that hidden status (may be an unpredicted side effect), thus I specify hidden: false when I want the label to be printed out.

    In the end, your code sample became this:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public List<object> Data
        {
            get
            {
                return new List<object>
                {
                    new { Month = "Jan", Data1 = 0, Data2 = 37, Data3 = 35, Data4 = 4 },
                    new { Month = "Feb", Data1 = 20, Data2 = 37, Data3 = 36, Data4 = 5 },
                    new { Month = "Mar", Data1 = 0, Data2 = 36, Data3 = 37, Data4 = 4 },
                    new { Month = "Apr", Data1 = 18, Data2 = 36, Data3 = 38, Data4 = 5 },
                    new { Month = "May", Data1 = 18, Data2 = 35, Data3 = 39, Data4 = 4 },
                    new { Month = "Jun", Data1 = 0, Data2 = 34, Data3 = 42, Data4 = 4 },
                    new { Month = "Jul", Data1 = 16, Data2 = 34, Data3 = 43, Data4 = 4 },
                    new { Month = "Aug", Data1 = 16, Data2 = 33, Data3 = 44, Data4 = 4 },
                    new { Month = "Sep", Data1 = 16, Data2 = 32, Data3 = 44, Data4 = 4 },
                    new { Month = "Oct", Data1 = 16, Data2 = 32, Data3 = 45, Data4 = 4 },
                    new { Month = "Nov", Data1 = 15, Data2 = 31, Data3 = 46, Data4 = 4 },
                    new { Month = "Dec", Data1 = 15, Data2 = 31, Data3 = 47, Data4 = 4 }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>62616 - Conditionally showing bar labels in chart</title>
        <script type="text/javascript">
            var renderLabel = function (text, sprite, config, rendererData, index) {
                if (text === 0) {
                    return { hidden: true };
                } else {
                    return { hidden: false, text: Ext.util.Format.number(text, '0,0') };
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>62616 - Conditionally showing bar labels in chart</h1>
    
            <ext:Container
                runat="server"
                Width="800"
                Height="500"
                Layout="FitLayout">
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server">
                        <Store>
                            <ext:Store runat="server" Data="<%# Data %>" AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data1" />
                                            <ext:ModelField Name="Data2" />
                                            <ext:ModelField Name="Data3" />
                                            <ext:ModelField Name="Data4" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Dock="Right" />
                        <Axes>
                            <ext:NumericAxis
                                Fields="Data1"
                                Position="Left"
                                Grid="true"
                                AdjustByMajorUnit="true"
                                Minimum="0">
                                <Renderer Handler="return label + '%';" />
                            </ext:NumericAxis>
                            <ext:CategoryAxis Fields="Month" Position="Bottom" Grid="true" />
                        </Axes>
                        <Series>
                            <ext:BarSeries
                                XField="Month"
                                YField="Data1"
                                Titles="IE"
                                Stacked="true">
                                <StyleSpec>
                                    <ext:Sprite Opacity="0.8" />
                                </StyleSpec>
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="yellow" />
                                </HighlightConfig>
                                <Label
                                    Display="InsideEnd"
                                    Field="Data1"
                                    Orientation="Horizontal"
                                    Color="#333"
                                    TextAlign="Center">
                                    <Renderer Fn="renderLabel" />
                                </Label>
                            </ext:BarSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
    Hope this fulfills your needs!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thank you fabricio and now working as expected.
  6. #6
    Glad it worked, Vamsi! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Aug 29, 2017, 12:05 AM
  2. [OPEN] [#296] Charts - Bar labels show/hide
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Jul 12, 2013, 4:40 AM
  3. [CLOSED] Bar chart label position
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 29, 2013, 4:55 AM
  4. Replies: 2
    Last Post: Dec 19, 2011, 1:54 AM
  5. [CLOSED] Display Field V/s Label
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 06, 2011, 1:14 PM

Posting Permissions