I have an ASP Chart like this:
I am not sure how I can make the labels for the values to appear vertical instead of being horizontal. I am not sure if this can be achieved by CSS as the resultant output is an image.
All I have with me is the code which says something like this:
Saw some similar question here: C# chart rotate labels, but it is for C# and the given solution has C# code. I am using ASP.NET VBScript and also I am not using any code other than the above mark-up.
Also please advice me how to change the bar colour to a different one.
Is there anything else that I should check?
Define LabelAngle
and Color
to the values you want and disable SmartLabelStyle
as shown in the markup below:
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" Height="400px" Width="600px">
<Series>
<asp:Series Name="Series1" IsValueShownAsLabel="True" LabelAngle="-90" LabelFormat="0,0" XValueMember="salesordernumber" YValueMembers="subtotal" Color="Red" Font="Microsoft Sans Serif, 12pt">
<SmartLabelStyle Enabled="False" />
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY Maximum="3000">
<MajorGrid Enabled="False" />
<LabelStyle Format="0,0" />
</AxisY>
<AxisX>
<MajorGrid Enabled="False" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
EDIT: use the chart's PreRender
event to assign different colors to each data point in your series. The sample below assigns random colors but you could modify it to assign any colors you want.
protected void Chart1_PreRender(object sender, EventArgs e)
{
Random r = new Random();
foreach (DataPoint dp in Chart1.Series[0].Points)
dp.Color = Color.FromArgb(r.Next(0, 255), r.Next(0, 255), r.Next(0, 255));
}
EDIT: Adding full VB code.
WebForm.aspx:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" Height="400px" Width="600px" DataSourceID="SqlDataSource1">
<Series>
<asp:Series Name="Series1" IsValueShownAsLabel="True" LabelAngle="-90" LabelFormat="0,0" XValueMember="salesordernumber" YValueMembers="subtotal" Color="Red" Font="Microsoft Sans Serif, 12pt">
<SmartLabelStyle Enabled="False" />
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY Maximum="3000">
<MajorGrid Enabled="False" />
<LabelStyle Format="0,0" />
</AxisY>
<AxisX>
<MajorGrid Enabled="False" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="select * from table;"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
WebForms.aspx.vb:
Imports System.Web.UI.DataVisualization.Charting
Imports System.Drawing
Public Class WebForm1
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub Chart1_PreRender(sender As Object, e As EventArgs) Handles Chart1.PreRender
Dim r As New Random
For Each dp As DataPoint In Chart1.Series(0).Points
dp.Color = Color.FromArgb(r.Next(0, 255), r.Next(0, 255), r.Next(0, 255))
Next
End Sub
End Class