How to change legend color in radhtmlbar chart that dynamically created using vb.net

0 Answers 72 Views
Chart (HTML5)
M Kumar
Top achievements
Rank 1
Iron
Veteran
M Kumar asked on 26 Jul 2023, 05:01 AM

Hi sir

 

 

                 I  create radhtmlbar chart dynamically created using below code i have two column series one for task and another lateaction i give color dynamically that color not update in legend

             How we handle this situation.

 

Dim chart2 As New RadHtmlChart
        chart2.ID = "chart2"
        chart2.ChartTitle.Text = "Employee Efficiency (KPI)"

        chart2.PlotArea.XAxis.LabelsAppearance.RotationAngle = 100

        chart2.PlotArea.XAxis.DataLabelsField = _ChartSeriesFieldTitlexaxis2

        chart2.PlotArea.Series.Clear()
        chart2.PlotArea.XAxis.LabelsAppearance.RotationAngle = 0
        Dim series4 As New ColumnSeries
        series4.DataFieldY = _ChartDataFieldTitle2
        series4.Name = "Total task(s)"

        series4.LabelsAppearance.DataFormatString = "{0} Task(s)"

        chart2.PlotArea.Series.Add(series4)
        Dim series66 As New ColumnSeries
        series66.DataFieldY = _ChartDataFieldTitle23
        series66.Name = "Late action(s)"

        series66.LabelsAppearance.DataFormatString = "{0} Task(s)"
        chart2.PlotArea.Series.Add(series66)

        Dim strrec As String = ""

        series4.ColorField = "ColorRange"
        series66.ColorField = "ColorRange1"
        chart2.Legend.Appearance.Visible = True
        chart2.Legend.Appearance.Position = ChartLegendPosition.Top

        firstTable2.Columns.Add("ColorRange", Type.GetType("System.String"))
        firstTable2.Columns.Add("ColorRange1", Type.GetType("System.String"))
        Dim cosos2 As Integer = 0
        For Each row As DataRow In firstTable2.Rows

            row("ColorRange") = _Colors1(cosos2)
            row("ColorRange1") = _Colors2(cosos2)
                  Next

 

 


                                      
Rumen
Telerik team
commented on 28 Jul 2023, 12:02 PM | edited

If you want to modify the legend's square indicator color along with the column series color, you will have to use the series4.Appearance.FillStyle.BackgroundColor property as explained in the following article: 

Conditional Item Colorization - Effect on Area, Line, Scatter and ScatterLine Series

Here is an example:

 

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            CreateChart()
        End If
    End Sub
    Private Sub CreateChart()
        Dim chart2 As New RadHtmlChart()
        chart2.ID = "chart2"
        chart2.ChartTitle.Text = "Employee Efficiency (KPI)"

        chart2.PlotArea.XAxis.LabelsAppearance.RotationAngle = 100

        ' Dummy Data Source (Replace this with your actual data source)
        Dim dataSource As New List(Of TaskData)()
        dataSource.Add(New TaskData(10, 3, "Red", "Green"))
        '  dataSource.Add(New TaskData(8, 1, "Yellow", "Blue"))
        '  dataSource.Add(New TaskData(15, 5, "Orange", "Purple"))

        chart2.DataSource = dataSource

        chart2.PlotArea.Series.Clear()

        Dim series4 As New ColumnSeries()
        series4.DataFieldY = "TotalTasks"
        series4.Name = "Total task(s)"
        series4.LabelsAppearance.DataFormatString = "{0} Task(s)"
        '  series4.ColorField = "ColorRange"
        series4.Appearance.FillStyle.BackgroundColor = Color.FromArgb(0, 150, 75)

        chart2.PlotArea.Series.Add(series4)

        Dim series66 As New ColumnSeries()
        series66.DataFieldY = "LateActions"
        series66.Name = "Late action(s)"
        series66.LabelsAppearance.DataFormatString = "{0} Task(s)"
        '  series66.ColorField = "ColorRange1"
        series4.Appearance.FillStyle.BackgroundColor = Color.FromArgb(100, 50, 55)



        chart2.PlotArea.Series.Add(series66)

        chart2.Legend.Appearance.Visible = True
        chart2.Legend.Appearance.Position = ChartLegendPosition.Top

        ' Add the chart to the page's controls
        Me.form1.Controls.Add(chart2)
    End Sub
    Public Class TaskData
        Public Property TotalTasks As Integer
        Public Property LateActions As Integer
        Public Property ColorRange As String
        Public Property ColorRange1 As String
        Public Sub New(ByVal totalTasks As Integer, ByVal lateActions As Integer, ByVal colorRange As String, ByVal colorRange1 As String)
            Me.TotalTasks = totalTasks
            Me.LateActions = lateActions
            Me.ColorRange = colorRange
            Me.ColorRange1 = colorRange1
        End Sub
    End Class
 

You can also examine how the ColorField property is used in the https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/custombarcolor/defaultcs.aspx demo.

No answers yet. Maybe you can help?

Tags
Chart (HTML5)
Asked by
M Kumar
Top achievements
Rank 1
Iron
Veteran
Share this question
or