View Full Version : To change particular label in a stack chart based on conditions

Prachi Sinha
5 Oct 2015, 10:40 PM

I am using extjs 4.1.3.

I have made a stack chart with two bars, say for example 'Base Month' and 'Current Month' I have different values of sales of different products like A, B, C etc for both Base and Current Months .

My requirement is that when I click on any of the bar of Current Month stack, that particular bar (say Product A) should change its color and font size of the label.

All the data of the products to be displayed in two stacks is coming in one array.

I am able to change its color, as in the 'render' is called for all the products once.
I have used the following code to determine if the data is for 'Base Month' or 'Current Month', as I only want that the color of 'Current Month' should be changed. and not for the 'Base Month'

renderer : function(sprite, record, attr, index, store) {

var chartSeriesLength = columnStackedRef.columnStackedChart.series.items[0].items.length;

if(index> (chartSeriesLength/2) && product === columnStackedRef.selectedProduct){
var color =columnStackedRef.MapForColor.get(causal);

return Ext.apply(attr, {


With index> (chartSeriesLength/2) It is able to understand that its for the second stack ('Current Month')
This is working fine and my colors (from the map) are getting changed accordingly.

However, for labels, OnPlaceLabel is called and it is called for an indefinite a no. of times, so I am not able to determine if its for Current Month or Base Month.

as a result, font size of labels of both the stacks are getting changed.

onPlaceLabel : function(label, storeItem, item, i, display, animate, index)
if (label1 == columnStackedRef.selectedProduct && columnStackedRef.MapForColor.get(product)=="#0088bf" )

fontSizeForCompareAcross = '14px';



with this code, both the labels' fonts are getting changed.

Please suggest a way out.

21 Jul 2016, 1:05 PM
Maybe this fiddle will help you https://fiddle.sencha.com/#fiddle/1e27