1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    93
    Vote Rating
    0
    vijayakumar84 is on a distinguished road

      0  

    Default Unanswered: How to change color of bar chart in extjs4.1

    Unanswered: How to change color of bar chart in extjs4.1


    Hi friend,
    can anybody tell how to change the color of bar chart.I have tried but its not working

    style : {
    fill : ['red', 'green'],
    width : 30


    }

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,092
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    This is how I did it (found it somewhere on the net). In the bar chart series, use the following renderer:

    Code:
    renderer: function(sprite, record, attr, index, store) {
        var color = colorpalette[index];
        return Ext.apply(attr, { fill: color });
    }
    where

    Code:
    var colorpalette = [
                                            'rgb(23, 67, 80)',            // black
                                            'rgb(255, 255, 0)',            // yellow
                                            'rgb(164, 107, 100)',        // brown
                                            'rgb(0, 0, 160)',            // dark blue
                                            'rgb(0, 128, 0)',                // dark green
                                            'rgb(255, 158, 30)',        // orange
                                            'rgb(13, 175, 248)',        // light blue
                                            'rgb(255, 50, 50)',            // red
                                            'rgb(128, 0, 128)',            // purple
                                            'rgb(0, 205, 0)',                // light green
                                            'rgb(255, 10, 138)'            // pink
                                        ];
    PS: This worked in ExtJS 4.0.7. Havent tested with newer versions.

Thread Participants: 1

Tags for this Thread