View Full Version : extjs 4 - change bar and column chart's bar color by selecting color picker color

10 May 2013, 3:20 AM
Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),
id :'colorpicker',
createPicker: function() {
return Ext.create('Ext.picker.Color', {
resizable :true,
floating: true,
select: function(selColor) {
Ext.getCmp('colorpicker').setValue("#"+ selColor);
x = Ext.getCmp('colorpicker').getValue();

Ext.getCmp('colorpicker').setFieldStyle('background-color:' + x + ' ;background-image: none;');
var chart = Ext.getCmp('chartid');
Ext.apply(chart.series.colorSet, {fill: selColor});


13 May 2013, 9:37 AM
I haven't tried it, but I'd think you might be able to use a renderer (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.chart.series.Series-cfg-renderer) and have that renderer look for a property on the chart or some variable that is set by the color picker. To have the chart use that color you would do chart.redraw (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.chart.Chart-method-redraw)() after the color selection.