Results 1 to 4 of 4

Thread: Pie chart and custom colors

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    18

    Default Pie chart and custom colors

    Hi, in our polar chart if we use custom colors for pie3d series they are correctly rendered in the pie but not in legend as you can see in this screenshot:
    Untitled.png

    and this is the code..

    Code:
    Ext.define('Amyd.widget.chart.GenericPie', {
          extend:'Ext.panel.Panel'
        , queryParams : null
        , referenceHolder: true
        
        , queryDrillParams : new Ext.util.HashMap()
            
        , layout: 'vbox'
        , flex: 1
        , tbar    : []
        , items : []
        
        , showMarkers : true
        , showInLegend : true
        
        , labelField : ''    // REASON
        , counterField : ''    // COUNTER
        , queryDrillID : undefined
        
        , initComponent: function() {
            var me = this;
    
            Ext.apply(me, {        
                items  : [
                {
                      xtype     : 'polar'
                    , reference : 'polarchart'
                                    
                    , innerPadding: 40
                    , width: '100%'
                    , height: 500
                    , interactions: ['itemhighlight', 'rotatePie3d']
                    
                    , plugins: {
                        ptype: 'chartitemevents',
                        moveEvents: true
                    }
                    
                    , legend: {
                        type: 'sprite',
                        docked: 'bottom'
                    }
                    
                    , store : ...our store...
                    
                    , series : [{
                               type: 'pie3d'
                             , donut     : 35
                             , distortion: 0.65
                             , thickness : 35
                             , angleField: me.counterField
                             , label     : { field: me.labelField }
                             , highlight : { margin: 40 }
                              
                             , colors: Amyd.utils.Palette.getPaletteColors( me.colors ) //Colors from singleton palette
    
                             , tooltip: {
                                  trackMouse: true
                                , width  : 140
                                , height :  28 
                                , scope  : this
                                , renderer: function(toolTip, storeItem, item){
                                    toolTip.setHtml(storeItem.get(me.labelField) );
                                }
                             }                             
                        }]
                    
                    , listeners: {
                            itemclick: function (chart, item, event) {
                               // some code...
                        }
                }]
            });
        
            me.callParent(arguments);
        }
    If the comment colors attribute inside series:

    Code:
    ...
    // , colors: Amyd.utils.Palette.getPaletteColors( me.colors )
    ...
    legend and pie colors are synchronized:
    Untitled.png

    What are we missing in our code to make things work correctly?

    Thanks,
    Francesco

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Are you able to recreate this issue in a test case?
    https://fiddle.sencha.com/#view/editor

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    18

    Default

    Thanks, this is the fiddle:
    https://fiddle.sencha.com/#view/editor&fiddle/1o7n

    ...creating it I found that removing type: 'sprite' from legend solves my problem.

    legend: {
    type: 'sprite', //--> Not working legend
    docked: 'bottom'
    },

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Ah, sorry for not spotting that in your code. Glad to see you're up and running, and thanks for sharing the solution with the community.

Similar Threads

  1. Sencha 1.1 - Fusion Chart Intgeration - Chart Bar Colors are Black
    By tramchand in forum Sencha Touch 1.x: Q&A
    Replies: 2
    Last Post: 25 Jul 2012, 12:41 AM
  2. Replies: 0
    Last Post: 27 Oct 2011, 7:15 PM
  3. Custom Colors of bars in Bar Chart break on Legend update
    By sawda03 in forum Ext: Discussion
    Replies: 5
    Last Post: 19 Aug 2011, 5:58 AM
  4. How to set custom colors and custom label for pie chart?
    By mr.tocxoan in forum Ext: Discussion
    Replies: 1
    Last Post: 17 May 2011, 10:59 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •