View Full Version : Hiding chart series labels

20 Oct 2014, 11:50 PM
I am using Extjs 4.2.2. In one of page we have many charts created under panel using xtype

Ext.create('widget.panel', {
width: width,
height: height,
title: title,
renderTo: id,
id: id,
margin: margin,
bodyStyle:{"background":"transparent !important;"},
layout: 'fit',
items: {
xtype: 'chart',
animate: true,
shadow: false,
width: 100,
store: store,

and we have configured series labels like:

label: {
display: 'insideStart',
'text-anchor': 'middle',
field: ['data1', 'data2'],
renderer: function(v) { return " "+v; },
orientation: 'horizontal',
contrast: true,

We are able to get labels. But at some point, we need to hide all series labels.
We have tried using component query like - Ext.ComponentQuery.query('panel > chart > series > label')[0]. but no luck. Please give us a solution.
If you can hide series labels on particular chart component, that is also fine.

22 Oct 2014, 8:28 PM

I'm afraid there isn't an API for fetching the labels of a series in order to set their attributes at runtime.

25 Nov 2014, 2:58 AM
Hi, today i was looking for exactly the same thing (the difference is that i was looking for a way to show the label instead of hiding it).

The only way i was able to accomplish it was via the renderer label config.
In fact, the label itself is not hidden/shown, it is there all the time - only the appearance is different.

So, giving that we have a visible series label like this:

display: 'insideEnd',
field: fieldsArray,
renderer: Ext.util.Format.numberRenderer('0.00 pcs'),
orientation: 'vertical',
color: '#000', contrast: true

We could "hide" it like this (in a handler, for the first series):

display: 'insideEnd',
field: fieldsArray,
renderer: function() { return ''; },
orientation: 'vertical',
color: '#000', contrast: true

Very ugly way, but it looks like it works for me, also in opposite direction.
Hope this helps.