How To Customize ASP.NET Chart Databound To SqlDataSource

Question

How To Customize ASP.NET Chart Databound To SqlDataSource

1.4k Views Asked by Snwr Jamal Muhammed At 06 August 2016 at 17:43

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?

Original Q&A

There are 1 best solutions below

**jsanalytics** · Accepted Answer · 2016-08-07T06:01:41.117000

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

How To Customize ASP.NET Chart Databound To SqlDataSource

There are 1 best solutions below

Related Questions in ASP.NET

Related Questions in CHARTS

Related Questions in MSCHART

Related Questions in ASP.NET-CHARTS

Trending Questions

Popular # Hahtags

Popular Questions