jptec Posted January 27, 2017 Share Posted January 27, 2017 Hi, I want to do a gradient area chart like the attached. Can I achieve like that gradient? I find some example like Bar-Chart-With-Gradient-Example in Sencha Touch like https://gist.github.com/amrishodiq/1369480 Also I find it in sencha help . http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.chart.CartesianChart-cfg-gradients But I dont know how to use it . Please advise. Link to comment Share on other sites More sharing options...
Sherzod Posted January 27, 2017 Share Posted January 27, 2017 Hi, Which Series are you using, TUnimAreaSeries ?! Link to comment Share on other sites More sharing options...
jptec Posted January 27, 2017 Author Share Posted January 27, 2017 Yes AreaSeries , exactly as the attached Picture Link to comment Share on other sites More sharing options...
Sherzod Posted January 27, 2017 Share Posted January 27, 2017 Hi, Can you try this approach for now?!: 1. UnimChart -> ClientEvents -> UniEvents -> Ext.chart.CartesianChart[chart] -> function chart.beforeInit: function chart.beforeInit(sender, config) { // gradients config config.gradients = [{ id: 'gradientId1', type: 'linear', angle: 45, stops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'yellow' }] }, { id: 'gradientId2', type: 'radial', stops: [{ offset: 0, color: '#555', }, { offset: 1, color: '#ddd', }] }] } 2. UnimChart -> ClientEvents -> ExtEvents -> Ext.chart.CartesianChart[chart] -> function chart.painted: function chart.painted(sender, eOpts) { var me=this; // for UnimAreaSeries1 me.getSeries()[0].sprites[0].setAttributes({fillStyle: 'url(#gradientId1)'}); me.getSeries()[0]._style.fillStyle='url(#gradientId1)'; // for UnimAreaSeries2 me.getSeries()[1].sprites[0].setAttributes({fillStyle: 'url(#gradientId2)'}); me.getSeries()[1]._style.fillStyle='url(#gradientId2)'; } * still need to change the color of the legend too, but at the moment it can be done with Brush.Color Try, Best regards. Link to comment Share on other sites More sharing options...
jptec Posted February 4, 2017 Author Share Posted February 4, 2017 Sorry for later reply. It works . Thank you Link to comment Share on other sites More sharing options...
Recommended Posts