extjs - EXTJS5 - how to add the legend color of pie chart dynamically? -
i have issue while using custom legend color in extjs 5 chart. can apply custom color chart legend cannot apply legend item. can hard-code colors using "colors" property within series handle issue statically .like
series: { type: 'bar', colors: ['orange', 'yellow'], ... }
but,i need pass color dynamically. need fetch legend colors store.so cannot hard-code it
my code.
ext.define('gmis.view.charts.pie.basicpielegend', { extend: 'ext.panel', config:{ storevalue: null, //'bankerdatastorechr' widthvalue: null, heightvalue: null, identifier: null, titlevalue : null, stylevalue : null, stylevalue1 : null, chartvalue : null, selbanker : null }, storevalue: null, constructor: function(cfg){ this.initconfig(cfg); this.callparent(); this.addcls(this.getstylevalue()); this.addcls(this.getstylevalue1()); }, xtype: 'basic-pie1', border: 0, initcomponent: function() { var me = this; me.items = [{ xtype: 'polar',//'chart', id: this.identifier, itemid: this.identifier, border:0, legend: { docked: 'top', }, interactions: 'rotate', width: this.widthvalue, height: this.heightvalue, animate: false, shadow: false, store: this.storevalue, insertpadding: 0, series: [{ type: 'pie', label: { field: 'name', display: 'rotate', }, xfield: 'data1',//anglefield: donut: 30, //colors: ['orange', 'yellow'], /*colors : ['#55aaff', '#ffbb00', '#da4545', '#8866ff', '#ff6600', '#b8005c', '#947171'],*/ renderer: function (sprite, config, rendererdata, index/*sprite, record, attr, index*/) { var record = rendererdata.store.getdata().items[index]; console.log(record.data.color); return ext.apply(rendererdata, { fillstyle: record.data.color }); }, showinlegend: true }] }]; this.callparent(); }, });
please let me know if need change something.
thanks in advance
i've created fiddle you: dynamic colors fiddle.
just use setcolors()
method , update layout dolayout()
method. chart colors (with legend colors too) updated.
Comments
Post a Comment