Search code examples
asp.netchartsmschartasp.net-charts

How To Customize ASP.NET Chart Databound To SqlDataSource

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.

Chart appearing as 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?

Solution

  • 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>

    enter image description here

    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));
    }

    enter image description here

    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