Rank 1
Hi I am trying change to change the color of the bar chart and databinded using sql datasource. the
Here's the code behind
Page load code behind
Dim barColors As Color() = New Color(7) {Color.Purple, Color.SteelBlue, Color.Aqua, Color.Yellow, Color.Navy, Color.Green, Color.Blue, Color.Red}
GraphIncoming.ChartTitle.Text = "Number of Incoming request per Area for the Year " + dpdYearWKPerArea.SelectedValue.ToString + ""
GraphIncoming.DataBind()
Dim k As Integer = 0
GraphIncoming.PlotArea.Series(0).Name = "Value"
For Each item As ChartSeriesItem In GraphIncoming.PlotArea.Series(0).Items
item.Appearance.FillStyle.MainColor = barColors(System.Math.Max(System.Threading.Interlocked.Increment(k), k - 1))
Next
######
aspx Page
<telerik:RadHtmlChart ID="GraphIncoming" runat="server" DataSourceID="SqlDataSource2" Font-Underline="False" Skin="Office2010Blue" Width="100%">
<PlotArea>
<Series >
<telerik:ColumnSeries DataFieldY="Value" >
<Appearance FillStyle-BackgroundColor="#337ab7"></Appearance>
<TooltipsAppearance Color="White" />
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="Area">
<LabelsAppearance RotationAngle="45">
</LabelsAppearance>
<TitleAppearance Text="">
<TextStyle Bold="true" Color="Red" FontFamily="Verdana" FontSize="12px" Italic="true" />
</TitleAppearance>
</XAxis>
<YAxis>
<TitleAppearance Text="Number of Incoming request">
<TextStyle Bold="true" Color="Red" FontFamily="Verdana" FontSize="12px" Italic="true" />
</TitleAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="True">
</Appearance>
</Legend>
<ChartTitle >
<Appearance Visible="True">
<TextStyle Bold="true" Color="Blue" FontFamily="Verdana" FontSize="12px" Italic="true" />
</Appearance>
</ChartTitle>
<Zoom Enabled="False"></Zoom>
</telerik:RadHtmlChart>
2 Answers, 1 is accepted
Rank 1
Hi Dayvee,
In order to have different colors for the series items in a databound chart you will need to pass the colors through the ColorField of the series.
For example:
<telerik:RadHtmlChart ID="GraphIncoming" runat="server" Font-Underline="False" Skin="Office2010Blue" Width="100%">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="Value" ColorField="Colors">
<%--<Appearance FillStyle-BackgroundColor="#337ab7"></Appearance>--%>
<TooltipsAppearance Color="White" />
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="Area">
<LabelsAppearance RotationAngle="45">
</LabelsAppearance>
<TitleAppearance Text="">
<TextStyle Bold="true" Color="Red" FontFamily="Verdana" FontSize="12px" Italic="true" />
</TitleAppearance>
</XAxis>
<YAxis>
<TitleAppearance Text="Number of Incoming request">
<TextStyle Bold="true" Color="Red" FontFamily="Verdana" FontSize="12px" Italic="true" />
</TitleAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="True">
</Appearance>
</Legend>
<ChartTitle>
<Appearance Visible="True">
<TextStyle Bold="true" Color="Blue" FontFamily="Verdana" FontSize="12px" Italic="true" />
</Appearance>
</ChartTitle>
<Zoom Enabled="False"></Zoom>
</telerik:RadHtmlChart> Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
GraphIncoming.DataSource = GetData()
GraphIncoming.DataBind()
End If
End Sub
Protected Function GetData() As DataTable
Dim dt As DataTable = New DataTable()
dt.Columns.Add("Area", GetType(String))
dt.Columns.Add("Value", GetType(Integer))
dt.Columns.Add("Colors", GetType(String)) 'accepts color names and rgb colors
dt.Rows.Add("", 15000, "purple")
dt.Rows.Add("", 14000, "steelBlue")
dt.Rows.Add("", 5000, "yellow")
dt.Rows.Add("", 20000, "navy")
dt.Rows.Add("", 8000, "#00ff00")
dt.Rows.Add("", 10000, "#0000ff")
dt.Rows.Add("", 7000, "red")
Return dt
End Function
Regards,
Vessy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
This Worked for me thanks, am literally searching this for past 2 days.
If we are binding data source dynamically in server side (C# or VB file). We have to add a new column with colors we want and in server sid.
We can use like this,
In VB:
Dim barSer1 As New BarSeries()
barSer1.DataFieldY = "Count"
barSer1.Name = "Count"
barSer1.ColorField = "Colors"
In C#:
BarSeries barSer1 = new BarSeries();
barSer1.DataFieldY = "Count";
barSer1.Name = "Count";
barSer1.ColorField = "Colors";
"Colors" is the Field Name in my dataTable which has colors for each Bar.