C# .NET - creating Horizontal bar chart in C# - Asked By Ram Krish on 02-Apr-10 08:58 AM

Hi all,

Please help me create a horizontal Bar chart in C# code not using tgird party chart control,  i need the code or idea to generate bar chart for the date which i fetch form database.

Help me out.
Sagar P replied to Ram Krish on 02-Apr-10 09:08 AM
This code snippet shows how to create a horizontal bar chart by inheriting from the Windows Panel Class and overring the OnPaint() method. The chart allows you to set a chart title as well as set gradient bar colors.

// Usage
        private void Form1_Load(object sender, EventArgs e)
            Chart xChart = new Chart();
            xChart.Width = 500;
            xChart.Height = 200;
            xChart.Location = new Point(10, 10);
            xChart.ChartTitle("What programming languages do you use?");
            xChart.AddItem(new ChartItem("C#", 92, BarColor.Red));
            xChart.AddItem(new ChartItem("Visual Basic", 67, BarColor.Green));
            xChart.AddItem(new ChartItem("Java", 87, BarColor.Blue));
            xChart.AddItem(new ChartItem("PHP", 76, BarColor.Orange));
            xChart.AddItem(new ChartItem("Python", 40, BarColor.Yellow));
// Chart.cs
using System;
using System.Collections;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
class Chart:Panel
    private ArrayList _ChartItems = new ArrayList();
    private string _ChartTitle;
    public void AddItem(ChartItem item)
    public void ChartTitle(string title)
        this._ChartTitle = title;
    protected override void OnPaint(PaintEventArgs e)
        Graphics g = e.Graphics;
        int ChartWidth = this.Width;
        int ChartHeight = this.Height;
        Rectangle ChartArea = new Rectangle(0, 0, ChartWidth-1, ChartHeight-1);
        LinearGradientBrush ChartGradientBg = new LinearGradientBrush(ChartArea, Color.FromArgb(230, 230, 230), Color.FromArgb(200, 200, 200), LinearGradientMode.Vertical);
        g.FillRectangle(ChartGradientBg, ChartArea);
        g.DrawRectangle(new Pen(new SolidBrush(Color.Gray)), ChartArea);
        if (this._ChartItems.Count > 0)
            int LabelX = 10;
            int LabelY = 50;
            Color BarColor1;
            Color BarColor2;
            foreach (object obj in this._ChartItems)
                ChartItem Item = (ChartItem)obj;
                string ItemLabel = Item.Label;
                int ItemValue = Item.Value;
                BarColor ItemColor = Item.Color;
                switch (ItemColor)
                    case BarColor.Gray:
                        BarColor1 = Color.FromArgb(200, 200, 200);
                        BarColor2 = Color.FromArgb(100, 100, 100);
                    case BarColor.Red:
                        BarColor1 = Color.FromArgb(255,0,0);
                        BarColor2 = Color.FromArgb(155,0,0);
                    case BarColor.Green:
                        BarColor1 = Color.FromArgb(0, 255, 0);
                        BarColor2 = Color.FromArgb(0, 155, 0);
                    case BarColor.Blue:
                        BarColor1 = Color.FromArgb(0, 0, 255);
                        BarColor2 = Color.FromArgb(0, 0, 155);
                    case BarColor.Orange:
                        BarColor1 = Color.FromArgb(255,165,0);
                        BarColor2 = Color.FromArgb(155, 65, 0);
                    case BarColor.Yellow:
                        BarColor1 = Color.FromArgb(255, 255, 0);
                        BarColor2 = Color.FromArgb(155, 155, 0);
                        BarColor1 = Color.FromArgb(200, 200, 200);
                        BarColor2 = Color.FromArgb(100, 100, 100);
                float Percent = (((float)ItemValue/(float)100));
                int BarPercent = Convert.ToInt32(Percent * (ChartWidth-150));
                Label lblItemLabel = new Label();
                lblItemLabel.Text = ItemLabel;
                lblItemLabel.Location = new Point(LabelX, LabelY);
                lblItemLabel.BackColor = Color.Transparent;
                lblItemLabel.AutoSize = false;
                lblItemLabel.TextAlign = ContentAlignment.MiddleRight;
                lblItemLabel.Width = 90;
                lblItemLabel.Font = new Font("Tahoma", 8);
                ToolTip lblTip = new ToolTip();
                lblTip.SetToolTip(lblItemLabel, ItemLabel);
                Label lblItemValue = new Label();
                lblItemValue.Text = ItemValue.ToString() + "%";
                lblItemValue.Location = new Point(BarPercent+100, LabelY+3);
                lblItemValue.BackColor = Color.Transparent;
                lblItemValue.Width = 40;
                lblItemValue.Font = new Font("Tahoma", 8);
                Rectangle BarArea = new Rectangle(100, LabelY, BarPercent, 20);
                LinearGradientBrush BarGradientBg = new LinearGradientBrush(BarArea, BarColor1, BarColor2, LinearGradientMode.Vertical);
                g.DrawString(this._ChartTitle, new Font("Tahoma", 10, FontStyle.Bold), new SolidBrush(Color.Black), 10, 10);
                g.FillRectangle(BarGradientBg, BarArea);
                g.DrawRectangle(new Pen(BarColor2), BarArea);
                LabelY += 25;
class ChartItem
    private string _Label;
    private int _Value;
    private BarColor _Color;
    public ChartItem(string label, int value)
        this._Label = label;
        this._Value = value;
    public ChartItem(string label, int value, BarColor color)
        this._Label = label;
        this._Value = value;
        this._Color = color;
    public string Label
        get { return this._Label; }
        set { this._Label = value; }
    public int Value
        get { return this._Value; }
        set { this._Value = value; }
    public BarColor Color
        get { return this._Color; }
        set { this._Color = value; }
public enum BarColor
    Red =1,
    Green = 2,
    Blue = 3,
    Orange =4,
    Gray =6

Check out this link for more;
Web Star replied to Ram Krish on 02-Apr-10 09:19 AM
There  are lots of third party control for charting purposes but here is good one in .net for horizontal bar chart
Zahed Khan replied to Ram Krish on 02-Apr-10 09:41 AM

    Hi Ram,

        If you have to show charts in Web based applications then go for, fusion charts awesome flash work, all you have to do is give dstaset to it and there you are.....
the link is, http://www.fusioncharts.com/LiveDemos.asp

and also i think that these charts can also be used for Windows app's so that your r&d....Gud Luck.........
Ram Krish replied to Sagar P on 05-Apr-10 01:01 AM
Thanks for Code!!!

But this code for windows application,i want to create chart for web application. I trying to generate the chart thru code. If  u have  suggestion and methods to generate bar chart thru code it will be  highly helpful for me.
Ram Krish replied to Zahed Khan on 05-Apr-10 01:03 AM
Yes i have to show graphs in Web app anly, but i am not allowed to use third party chart in my project. so i need generate chart , ur suggfestion and if u have any methods it will be highly helpful
Zahed Khan replied to Ram Krish on 05-Apr-10 01:28 AM

    Dear ram,

       It (Fusion Charts) is actually an open source, and as of my knowlegd it should not be considered as using any illegal or any third party tool....., it is providing you the whole source code wat it would give u is the Flash file which would take the value for coloumns (like, total revenue etc) and name for that coloumn(for the month of march etc) so u actually are coding it.....!

       But is u need to got to code it for all yourself then get ready for heavy use of Javascript and loads of Mathematical Calulation.

If i can find any thing like that would get u an starting point i will do let u know.