What's New?

[CLOSED] How can change color for only one chart column

  1. #1
    Feb 11, 2013, 4:14 PM

    [CLOSED] How can change color for only one chart column

    Hi,

    I need to change the color for one column of the chart,
    an example you can see in attached image (the image show the borders as different color instead I want to fill the column with different color)
    Click image for larger version.  Name: monitor.png  Views: 126  Size: 12.5 KB  ID: 5585

    I try in this way specifying the index of column for the 'value', but it doesn't work.
            function barRenderer(sprite, record, attr, index, store) {
            var color = ['rgb(213, 70, 121)',
                            'rgb(44, 153, 201)',
                            'rgb(146, 6, 157)',
                            'rgb(49, 149, 0)',
                            'rgb(249, 153, 0)'][value];

            return Ext.apply(attr, {
                fill: color
            });
        }
    Can you help me for this issue?
    Thank you so much
    Last edited by Daniil; Feb 12, 2013 at 10:55 AM. Reason: [CLOSED]
  2. #2
    Feb 11, 2013, 11:42 PM
    Hello!

    Please, try the following sample:

    <%@ Page Language="C#" %>
  
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
  
<script runat="server">
    public List<object> Data
    {
        get
        {
            return new List<object>
            {
                new {Year = 2005, Comedy = 5 },
                new {Year = 2006, Comedy = 2 },
                new {Year = 2007, Comedy = 3 },
                new {Year = 2008, Comedy = 4 }
            };
        }
    }
</script>
  
<!DOCTYPE html>
  
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
    <script>
        function columnRenderer(sprite, record, attr, index, store) {
            return Ext.apply(attr, {
                fill: index == 0 ? '#FF0': '#F0F'
            });
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
  
        <ext:Panel
            runat="server"
            Width="800"
            Height="400"
            Title="Stacked Bar Chart - Movies by Genre"
            Layout="FitLayout">
            <Items>
                <ext:Chart
                    ID="Chart1"
                    runat="server"
                    Animate="true">
                    <Store>
                        <ext:Store
                            runat="server"
                            Data="<%# Data %>"
                            AutoDataBind="true">                         
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Year" />
                                        <ext:ModelField Name="Comedy" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
  
                    <Axes>
                        <ext:NumericAxis                           
                            Fields="Comedy"
                            Position="Left">
                        </ext:NumericAxis>                          
  
                        <ext:CategoryAxis Fields="Year" Position="Bottom" />
                    </Axes>
  
                    <Series>
                        <ext:ColumnSeries 
                            Axis="Left"
                            Highlight="true" 
                            XField="Year" 
                            YField="Comedy">
                            <Renderer Fn="columnRenderer"></Renderer>
                        </ext:ColumnSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
    </form>  
</body>
</html>
  3. #3
    Feb 12, 2013, 8:08 AM
    Hi,

    Thank you so much for the example, now it works.

Similar Threads

  1. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  2. [CLOSED] Chosing the color of the stacked bar chart based
    By RCM in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 03, 2012, 11:36 AM
  3. [CLOSED] Change column background color after render
    By RCM in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 10, 2012, 7:08 AM
  4. [CLOSED] And now, what about gradient color in collumn chart?
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 05, 2012, 2:04 PM
  5. [CLOSED] Change background color of textfield, textarea, combobox after text change
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM

Posting Permissions