[CLOSED] Label display in bar charts

2 Attachment(s)

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.

Attachment 25244

Thank you,
Vamsi

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!

1 Attachment(s)

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.

Attachment 25246

Code:

<%@ 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>

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:

Code:

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:

Code:

<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:

Code:

<%@ 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!

Thank you fabricio and now working as expected.

Glad it worked, Vamsi! Thanks for the feedback!