How to get Bar color in ms-chart control

Question

4.50/5 (3 votes)

See more:

Hi All,

I am using ms-chart control to draw a chart.
I am assigning the data to the graph as

VB

commonChart1.DataSource = dataTableToBind;
commonChart1.DataBind();

Also using the Palette for the series to draw the bars.

My chart type is column.
I want to add legends to this which I got from the following code

VB

commonChart1.Legends.Add("Default")
For Each row As DataRow In dtToBind.Rows
Try
  Dim legendItem As LegendItem = New LegendItem()
  legendItem.Name = checkDBNull(row(0)).ToString()
  commonChart1.Legends("Default").CustomItems.Add(legendItem)
                   
  Catch ex As Exception

End Try

Now the Chart is displaying the legends, but all legends have the back colour white.
I want to assign the legend colour with the particular series point colour.

How can I achieve this?

Posted 6-Oct-11 3:00am

Nishant Priyadarshi

Updated 6-Oct-11 23:48pm

Dalek Dave

v3

Add a Solution

5 solutions

Solution 1

Add legends in your .aspx file. The charting control will take care of bar color for legends.

XML

<asp:chart id="Chart1" runat="server" BackColor="OrangeRed" Width="600px"
                      Height="300px" BorderColor="26, 59, 105" Palette="BrightPastel"
                      BorderDashStyle="Solid" BackSecondaryColor="White"
                      BackGradientStyle="TopBottom" BorderWidth="2"
                      ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
                      BackImageTransparentColor="White">
                          <titles>
                              <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3" Text="Attendance" ForeColor="26, 59, 105"></asp:Title>
                          </titles>
                          <legends>
                              <asp:Legend Enabled="True" IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" Docking="Bottom"></asp:Legend>
                          </legends>
                          <borderskin SkinStyle="Emboss"></borderskin>
                          <series>
                              <asp:Series IsValueShownAsLabel="True" ChartArea="ChartArea1" Name="Default" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat="#.#,H"></asp:Series>
                              <asp:Series IsValueShownAsLabel="True" ChartArea="ChartArea1" Name="Default1" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat="#.#,H"></asp:Series>
                              <asp:Series IsValueShownAsLabel="True" ChartArea="ChartArea1" Name="Default2" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat="#.#,H"></asp:Series>

                          </series>
                          <chartareas>
                              <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
                                  <axisy2 Enabled="False"></axisy2>
                                  <axisx2 Enabled="False"></axisx2>
                                  <area3dstyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False" WallWidth="0" IsClustered="False" />
                                  <axisy LineColor="64, 64, 64, 64" IsLabelAutoFit="False" ArrowStyle="Triangle">
                                      <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" Format="#.#,H" />
                                      <MajorGrid LineColor="64, 64, 64, 64" />
                                  </axisy>
                                  <axisx LineColor="64, 64, 64, 64" IsLabelAutoFit="False" ArrowStyle="Triangle">
                                      <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" IsStaggered="false" />
                                      <MajorGrid LineColor="64, 64, 64, 64" />
                                  </axisx>
                              </asp:ChartArea>
                          </chartareas>
                      </asp:chart>

notice in the above example

XML

<legends>
                              <asp:Legend Enabled="True" IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" Docking="Bottom"></asp:Legend>
                          </legends>

Posted 6-Oct-11 13:04pm

virang_21

Updated 6-Oct-11 18:10pm

v2

Comments

Dalek Dave 7-Oct-11 5:48am

Thorough answer.

Solution 2

try the following way:

String connString = ConfigurationManager.ConnectionStrings["LocalSqlServer"].ToString();
 String sSQL = "select distinct subject, marks FROM tblStudentMarks order by 2";
 DataTable result = new DataTable();
 using (SqlConnection conn = new SqlConnection(connString))
 {
  using (SqlCommand cmd = new SqlCommand())
  {
   conn.Open();
   cmd.CommandText = sSQL;
   cmd.Connection = conn;
   SqlDataReader dr;
   dr = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection);
   result.Load(dr);
   dr = null;
  }
 }
 String sSeries = "";
 //Assaigning ChartArea Name
 Chart2.ChartAreas.Add("chtArea");
 //Binding to Legends
 Chart2.Legends.Add("chtArea");
 LegendItem legendItem = new LegendItem();
 for (int i = 0; i < result.Rows.Count; i++)
 {
  sSeries = result.Rows[i][0].ToString().ToUpper();
  if(Chart2.Series.FindByName(sSeries) == null)
  {
   //Creating Unique Series
   Chart2.Series.Add(sSeries);
   legendItem.Name = sSeries;
   //Below some properties... of Legends
   legendItem.BorderWidth = 4;
   legendItem.ShadowOffset = 1; 
   legendItem.Color = Color.FromName(Chart2.Series[sSeries].Color.Name.ToString());
   legendItem = new LegendItem();
  }
  Chart2.Series[sSeries].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
  //Chart2.Series[sSeries].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;

  //Binding UserCounts
  Chart2.Series[sSeries].Points.AddY(Convert.ToDouble(result.Rows[i][1].ToString()));

  //Series properties
  Chart2.Series[sSeries].IsVisibleInLegend = true;
  Chart2.Series[sSeries].IsValueShownAsLabel = true;
  Chart2.Series[sSeries].ToolTip = "Data Point Y Value: #VALY{G}";
 }
 result = null;

 //Axis properties
 Chart2.ChartAreas[0].AxisX.Title = "User Roles";
 Chart2.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Verdana", 10, System.Drawing.FontStyle.Bold);
 Chart2.ChartAreas[0].AxisY.Title = "User Count";
 Chart2.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Verdana", 10, System.Drawing.FontStyle.Bold);
 Chart2.ChartAreas[0].AxisY2.LineColor = Color.Black;
 Chart2.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;
 Chart2.ChartAreas[0].BorderWidth = 1;
 Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
 Chart2.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
 Chart2.BorderlineWidth = 2;
 Chart2.BackColor = Color.AliceBlue;

 //Legends properties
 for (int j = 0; j < Chart2.Legends.Count; j++)
 {
  Chart2.Legends[j].BorderColor = Color.Black;
  Chart2.Legends[j].BorderWidth = 1;
  Chart2.Legends[j].BorderDashStyle = ChartDashStyle.Solid;
  Chart2.Legends[j].ShadowOffset = 1;
  Chart2.Legends[j].LegendStyle = LegendStyle.Table;
  Chart2.Legends[j].TableStyle = LegendTableStyle.Auto;
  Chart2.Legends[j].Docking = Docking.Bottom;
  Chart2.Legends[j].Alignment = StringAlignment.Center;
  Chart2.Legends[j].Enabled = true;
  Chart2.Legends[j].Font = new System.Drawing.Font("Verdana", 8, System.Drawing.FontStyle.Bold);
  Chart2.Legends[j].AutoFitMinFontSize = 5;
 }

Posted 6-Oct-11 18:30pm

member60

Updated 6-Oct-11 22:10pm

v2

Solution 3

Chart legend automatically selects color based on the color used in the series. You can only specify color for custom legend item

C#

chart1.Series[0].Color = Color.Green;

try to put your question in MSChart forum, Here[^].

Posted 6-Oct-11 18:52pm

koolprasad2003

Solution 4

XML

<asp:Content ContentPlaceHolderID="head" runat ="server">
       <style type="text/css">
        .BackColorTab
        {
            font-family:Verdana, Arial, Courier New;
            font-size: 10px;
            color:Gray;
            background-color:#CCCCFF;
        }
    </style>

</asp:Content>

XML

<asp:Chart ID="Chart2" runat="server">
               <Series>
                   <asp:Series Name="Series1" ChartArea="ChartArea1"  Color="Blue">
                   </asp:Series>
               </Series>
               <ChartAreas>
                   <asp:ChartArea Name="ChartArea1">
                   </asp:ChartArea>
               </ChartAreas>
           </asp:Chart>

Posted 6-Oct-11 23:32pm

raj ch

Comments

Dalek Dave 7-Oct-11 5:49am

Good Answer.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nishant Priyadarshi · Accepted Answer · 2011-10-09T09:07:00

Solution 5

Thanks to All for valuable help.

I got this solved but in some other way.
I used commonChart1.ApplyPaletteColors() which makes colors from assigned palette available for use and then used the datapoint color to get the colour assigned to datapoint.

Posted 9-Oct-11 9:07am

Nishant Priyadarshi