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!