The lines on the chart are not the same color as the landmarks

1 Answer 25 Views
Chart
Nhut
Top achievements
Rank 1
Iron
Nhut asked on 20 Jun 2023, 01:00 PM
currently i have a chart line and i have specified the color for each element in it from the store proc , but for some reason the lines connecting the timelines on the chart are different colors , only the The dot right at the landmark is the correct color I specified.
Here is my code

 @(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
                                                                .Name("LineChart_Customer_Processed")
                                                                .DataSource(dataSource => dataSource
                                                                .Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
                                                                .Group(group => group.Add(model => model.CompanyName))
                                                                .Sort(sort => sort.Add(model => model.DatePublish).Ascending())
                                                                )
                                                                .Events(events => events.SeriesClick("onSeriesClick"))
                                                                .Theme("material")
                                                                .Series(series =>
                                                                {
                                                                    series.Line(model => model.ID_Count)
                                                                    .Name("#= group.value #")
                                                                    .Style(ChartSeriesStyle.Smooth)
                                                                    .CategoryField("DatePublish")
                                                                    .Tooltip(tooltip => tooltip
                                                                    .Visible(true)
                                                                    .Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
                                                                    .Width(3).Opacity(0.6)
                                                                   .ColorField("Color");
                                                                })
                                                                .Legend(legend => legend
                                                                .Position(ChartLegendPosition.Bottom)
                                                                )
                                                                .ValueAxis(axis => axis.Numeric()
                                                                .Labels(labels => labels
                                                                .Format("{0}")
                                                                .Skip(2)
                                                                .Step(2)
                                                                )
                                                                )
                                                                .CategoryAxis(axis => axis
                                                                .BaseUnit(ChartAxisBaseUnit.Days)
                                                                .Labels(labels => labels
                                                                .DateFormats(formats => formats.Months("MM/dd"))
                                                                .Rotation(-45)
                                                                )
                                                                )
                                                                .HtmlAttributes(new { style = "width: 100%; height: 400px;" })
                                                                )
Please help me!

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 23 Jun 2023, 08:09 AM

Hi, Nhut,

The colorField setting is not compatible with Line charts:

The reason behind this limitation is the following one:

The line is considered a single entity and can only have a single color, set statically.

One line series, can have one color that is set through the .Color configuration:

series.Line().Color("#32a852")

Best Regards,
Georgi Denchev
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Tags
Chart
Asked by
Nhut
Top achievements
Rank 1
Iron
Answers by
Georgi Denchev
Telerik team
Share this question
or