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

    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

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

    Posted 18 Jul 2013 Link to this post


    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"];
           TestChart.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.TopRight;
           TestChart.AutoLayout = true;
           Color[] barColors = new Color[9]
           //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.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

  3. DevCraft R3 2016 release webinar banner
Back to Top