1. #1
    Ext User
    Join Date
    Feb 2009
    Posts
    9
    Vote Rating
    0
    pablosn is on a distinguished road

      0  

    Question Can you set Column Chart Colors depending upon value

    Is it possible to change the columns color depending upon the value (e.g. if less than 0 then set column color to red)?

    Thanks in advance.

  2. #2
    Ext User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
    vishal.chawathe is on a distinguished road

      0  

    Default is it possible

    Hi even I am looking to change the color dynamically based on the user click..

    Also is dragging on charts possible..just to select some bars in the column chart...



    Thanks

  3. #3
    Ext User
    Join Date
    Feb 2009
    Posts
    9
    Vote Rating
    0
    pablosn is on a distinguished road

      0  

    Post Information

    So far as far as i can tell no it's not possible. The charting is a third party component and the API is here:

    http://developer.yahoo.com/yui/charts/

    There are however other options for charting

    open flash charts 2 http://teethgrinder.co.uk/open-flash-chart-2/

    flot http://code.google.com/p/flot/
    and ext variety
    http://code.google.com/p/extflot/

    Hope all this helps.

  4. #4
    Sencha Premium Member GeorgeHernandez's Avatar
    Join Date
    Oct 2007
    Location
    Chicago
    Posts
    19
    Vote Rating
    0
    GeorgeHernandez is on a distinguished road

      0  

    Smile SOLVED: You can set chart column color depending on the value

    Assuming Ext JS 4.x:

    Code:
    series: [{
        type: 'column',
        ...
        yField: 'yField',
        renderer: function(sprite, record, attr, index, store) {
            var value = record.get('yField');
            var color;
            if (value < 70) {
                color = 'rgb(255, 0, 0)';
            } else {
                color = 'rgb(0, 0, 255)';
            }
            return Ext.apply(attr, {
                fill: color
            });
        }
    }]