This is a migrated thread and some comments may be shown as answers.

Line Chart MVC/ Change line color conditionally

1 Answer 186 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 01 Sep 2015, 06:38 PM

I have a Line chart with two lines and I want to change the color of one of the lines if it intersects the other line. Changing the background or any other solution I am not aware of would work too. Basically, I want to show visually that it is bad when line B is below line A.

I am using c# MVC, oh, and I'm in way over my head :/  

My code...

@(Html.Kendo().Chart<MetricsDashboard.Models.ABLineChart>()

    .Name("whatever")

    .Title("whatever")

    .DataSource(ds => ds.Read(read => read.Action("_NameofThing",Charts,Model)))

    .Series(series => {

            series.Line(model => model.LineAdata).Name("LineA").Color("Blue");

            series.Line(model => model.LineB.data).Name("LineB").Color("Green");

     })

     .CategoryAxis(axis => axis

             .Categories(model => model.CategoryAxis

      )

     .ValueAxis(axis => axis.Numeric()

             .Labels(labels => labels.Format("{0:N0"))

      )

)

 

1 Answer, 1 is accepted

Sort by
1
Iliana Nikolova
Telerik team
answered on 03 Sep 2015, 01:46 PM
Hi Justin,

Coloring different segments from line series to different colors is not supported. What I would suggest as a workaround is using the series ColorHandler and change the markers colors. For example: 
@(Html.Kendo().Chart<MetricsDashboard.Models.ABLineChart>()
   //....
  .Series(series => {
     series.Line(model => model.LineAdata).Name("LineA").ColorHandler("seriesColor");
     series.Line(model => model.LineB.data).Name("LineB");
  })
  //....
)
 
<script>
function seriesColor(point) {
   // custom logic
}
</script>


Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Justin
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or