PDA

View Full Version : Remove Legend Click on Charts



jksuf
20 Feb 2015, 2:22 AM
Hi guys, I would like to remove the default behavior of charts legend that is, hide/show a serie on click.

I am using extjs 5.1, do you know how I could achieve this? Here is a simple fiddle that you can modify: https://fiddle.sencha.com/#fiddle/ij6

And here is the corresponding code:


Ext.define('CustomChart', {
extend: 'Ext.chart.CartesianChart',

width: 390,
height: 400,

legend: {
docked: 'bottom'
},

store: Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1', 'data2', 'data3' ],
data: [
{ month: 'Jan', data1: 20, data2: 37, data3: 35 },
{ month: 'Feb', data1: 20, data2: 37, data3: 35 },
{ month: 'Mar', data1: 19, data2: 36, data3: 37 }
]
}),

axes: [{
type: 'numeric',
position: 'left',
grid: true,
fields: ['data1']
}, {
type: 'category',
position: 'bottom',
grid: true,
fields: ['month']
}],

series: [{
type: 'bar',
axis: 'left',
xField: 'month',
yField: [ 'data1', 'data2', 'data3' ],
stacked: true
}]
});


var chart = Ext.create('CustomChart', {
renderTo: Ext.getBody()
});


Thanks a lot in advance :) !!

Gary Schlosberg
2 Mar 2015, 6:29 AM
Here's a thread that should help:
http://www.sencha.com/forum/showthread.php?297945

harongas
12 Jul 2015, 10:55 PM
on Ext.chart.Legend, put this line under the config:{}. It does stopped the toggling hide/show of the chart slices when you clicked the legend items

Ext.define('Ext.chart.Legend', {
... config: {
...
toggleable: false
},

hope this works. :) check the Ext.chart.Legend api source

mitchellsimoens
13 Jul 2015, 5:02 AM
@harongas you are defining a subclass when you don't need to, just add toggable into the legend config:

qcc

harongas
13 Jul 2015, 5:52 PM
@mitchellsimoens ah yeah. Since mine was in a MVC way. :) Thanks

You're right just add the toggleable: true/false in the legend config of the chart.