[CLOSED] how to please tell me change Stacked chart background color

  1. #1

    [CLOSED] how to please tell me change Stacked chart background color

    HI Daniil

    Can you please tell me how to change Stacked chart background color

    For example :
    COloumn1 background color should be : Yellow
    COloumn2 background color should be : Green
    COloumn3 background color should be : Red
    COloumn4 background color should be : Gray

    Below is code
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server"> 
     
     
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                try
                { 
                    BindRecords();
                }
                catch (System.Data.SqlClient.SqlException ex)
                {
                    string strin = ex.ToString();
                }
            }
        }
    
        public void BindRecords()
        {
            DataTable dtSpiCpi = new DataTable();
            dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
            dtSpiCpi.Columns.Add("MonthNYear", typeof(string));
            dtSpiCpi.Columns.Add("Column1", typeof(decimal));
            dtSpiCpi.Columns.Add("Column2", typeof(decimal));
            dtSpiCpi.Columns.Add("Column3", typeof(decimal));
            dtSpiCpi.Columns.Add("Column4", typeof(decimal));
            dtSpiCpi.Columns.Add("Column5", typeof(decimal));
    
            DataRow objRow = null;
    
            for (int index = 1; index <= 12; index++)
            {
                objRow = dtSpiCpi.NewRow();
                objRow["MonthNYear"] = index + "Jan15";
    
                if (index < 3)
                {
                    objRow["Column1"] = Convert.ToDecimal("2.50");
                    objRow["Column3"] = Convert.ToDecimal("2.10");
                    objRow["Column4"] = Convert.ToDecimal("2.00");
                    objRow["Column2"] = Convert.ToDecimal("1.0");
                    objRow["Column5"] = Convert.ToDecimal("1.9");
                }
                else if (index < 5)
                {
                    objRow["Column1"] = Convert.ToDecimal("1.0");
                    objRow["Column2"] = Convert.ToDecimal("2.0");
                    //objRow["Column3"] = Convert.ToDecimal("3.0");
                    objRow["Column4"] = Convert.ToDecimal("4.0");
                    objRow["Column5"] = Convert.ToDecimal("2.9");
                }
                else if (index < 7)
                {
                    //objRow["Column1"] = Convert.ToDecimal("9.0");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("3.0");
                    objRow["Column5"] = Convert.ToDecimal("3.9");
    
                }
                else
                {
                    objRow["Column1"] = Convert.ToDecimal("4.9");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("1.0");
                    objRow["Column5"] = Convert.ToDecimal("5.9");
    
                }
                //objRow["Column5"] = Convert.ToDecimal("4.9");
                dtSpiCpi.Rows.Add(objRow);
            }
             
            storeFillRate.RemoveAll();
             
    
            storeFillRate.DataSource = dtSpiCpi;
            storeFillRate.DataBind();
    
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            
        </style>
        <ext:XScript ID="XScript1" runat="server">
    
            <script type="text/javascript">   
        </script>
            
            
    
        </ext:XScript>
        <script type="text/javascript" language="javascript">
    
    
             
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="1">
                <tr>
                    <td>
                       <%-- <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
                            <Axis Stroke="Black" />
                            <AxisLabelLeft Font="normal 11px Arial" StrokeWidth="0.5" />
                            <AxisLabelBottom Font="normal 11px Arial" StrokeWidth="0.5" />
                        </ext:ChartTheme>--%>
                         
                        <ext:Panel ID="PanelYtd" runat="server" Width="1000" Border="false" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartFillRate" runat="server" Shadow="true" Animate="true" Width="955" Height="420">
                                    <Store>
                                        <ext:Store ID="storeFillRate" runat="server">
                                            <Model>
                                                <ext:Model ID="Model36" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="MonthNYear" />
                                                        <ext:ModelField Name="Column1" />
                                                        <ext:ModelField Name="Column2" />
                                                        <ext:ModelField Name="Column3" />
                                                        <ext:ModelField Name="Column4" /> 
                                                        <ext:ModelField Name="Column5" /> 
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <LegendConfig Position="Bottom" BoxStroke="false" LabelFont="8.5pt Arial" />
                                    <Axes>
                                        <ext:NumericAxis Fields="Column1,Column2,Column3,Column4,Column5" Title="FTE">
                                            <Label FontSize="8.5pt" FontFamily="Arial" />
    
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Fields="MonthNYear" Position="Bottom" Title="Month Year">
                                            <Label FontFamily="Arial" FontSize="8.5" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <Series>
                                        <ext:ColumnSeries Axis="Bottom" XField="MonthNYear" YField="Column1,Column2,Column3,Column4" Stacked="true" Highlight="true" ShowInLegend="true">
                                            <Tips ID="Tips1" runat="server" TrackMouse="true" Width="65" Height="28">
                                                <Renderer Handler="this.setTitle(String(item.value[1]) + 'M');" />
                                            </Tips>
                                            <Label FontFamily="Arial" FontSize="8.5px" />
                                        </ext:ColumnSeries>
                                        <ext:LineSeries Axis="Left" XField="MonthNYear" YField="Column5" Title="FTE" Smooth="3">
                                            <MarkerConfig Fill="#FF0000" Stroke="#FF0000" Type="Circle" Radius="2" StrokeWidth="1" />
                                            <Style Stroke="#FF0000" StrokeWidth="1" />
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	FR.png 
Views:	63 
Size:	28.8 KB 
ID:	24190  
    Last edited by Daniil; Sep 01, 2015 at 2:39 PM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    Please use:
    <ext:ChartTheme runat="server" ThemeName="MyChartTheme">
        <CustomConfig>
            <ext:ConfigItem Name="colors" Value="['yellow', 'green', 'red', 'gray']" Mode="Raw" />
        </CustomConfig>
    </ext:ChartTheme>
    <ext:Chart ... Theme="MyChartTheme">
  3. #3

    Thanks Daniil its working

    Thanks Daniil its working

Similar Threads

  1. [CLOSED] How to change ToolTip background color ,font zize for line chart
    By praveencat123 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 25, 2015, 5:35 PM
  2. [CLOSED] Change Color Window's Header Background Color
    By rguardado in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 16, 2015, 3:48 PM
  3. [CLOSED] How to change background color of labels in chart
    By livehealthierGF in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 16, 2013, 4:27 AM
  4. Replies: 4
    Last Post: Mar 13, 2013, 6:10 AM
  5. [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

Tags for this Thread

Posting Permissions