Bar Chart with different color

Thread is closed for posting
2 posts, 0 answers
  1. Karthik Kantharaj
    Karthik Kantharaj avatar
    101 posts
    Member since:
    Mar 2010

    Posted 18 Jul 2013 Link to this post

    Hi guys

    I have one requirement
    I saw below link

    http://www.telerik.com/help/reporting/buildingdatabinddatabase.html

    In that all bars are in same color(Grey) can i have different colors for individual bar



    above all in one group
    and i know if we have different group we can get different colors
    but i dont want different groups


    Karthik.K
  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 18 Jul 2013 Link to this post

    Hello,

    You can assign different colors to bar chart by looping the items in a series (group) and assign the colors based on that.

    Please try the below implementation


    protected void Page_Load(object sender, EventArgs e)
       {
           var ChartDT = this.GenerateDataTable();
           TestChart.ChartTitle.TextBlock.Text = "Test Method";
           TestChart.DataSource = ChartDT;
           TestChart.PlotArea.XAxis.AxisLabel.Visible = true;
           TestChart.PlotArea.YAxis.AxisLabel.Visible = true;
           ChartSeries series = new ChartSeries();
           series.Type = ChartSeriesType.Bar;
           foreach (DataRow dtRow in ChartDT.Rows)
           {
               ChartSeriesItem chartSeriesItem = new ChartSeriesItem();
               chartSeriesItem.YValue = Convert.ToDouble(dtRow["Value"]);
               chartSeriesItem.Name = (string)dtRow["Test"];
               series.AddItem(chartSeriesItem);
           }
           TestChart.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.TopRight;
           TestChart.AutoLayout = true;
           TestChart.DataBind();
     
           Color[] barColors = new Color[9]
           {
                  Color.Purple,
                  Color.SteelBlue,
                  Color.Aqua,
                  Color.Yellow,
                  Color.Navy,
                  Color.Green,
                  Color.Blue,
                  Color.Red,
                  Color.AliceBlue
              };
           //Assingning the color to bars
           foreach (ChartSeriesItem item in TestChart.Series[0].Items)
           {
               item.Appearance.FillStyle.MainColor = barColors[item.Index];
           }
       }
       private DataTable GenerateDataTable()
       {
           var dt = new DataTable();
     
           dt.Columns.Add("Test");
           dt.Columns.Add("Value");
     
           dt.Rows.Add("Test1", 100);
           dt.Rows.Add("Test2", 10);
           dt.Rows.Add("Test3", 30);
           dt.Rows.Add("Test4", 95);
           dt.Rows.Add("Test5", 130);
     
           return dt;
       }

    Refer this link for additional reference

    Thanks,
    A2H
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top