set Series Colors for mvc kendo chart

[medialog]

Hi all, 

i have this chart i need to set a specific color for each line from the model, knowing  that the number of series vary depends on the filter.

can any body support!

@model IEnumerable<GraphModel>
@using Msh.Web.Models

<div class="row">
    <div class="chart-wrapper">
        @(Html.Kendo().Chart(Model)
        .Name("chartoccupancyrate")
        .Title(T("occupancyrate").ToString())
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("_GetGlobaleGraphData", "Statistical").Data("additionalInfo"))
            .Group(group => group.Add(model => model.Symbol))
            .Sort(sort => sort.Add(model => model.Date).Ascending())
        )
        .Series(series =>
        {
            series.Line(model => model.OccupancyRate)
             .Name("#= group.value # ");
            //.Name("#= group.value # " + "(" + T("hotel") + ")");
        })
        .Legend(legend => legend
            .Position(ChartLegendPosition.Top)
        )
        .ValueAxis(axis => axis.Numeric()
         .MinorGridLines(minorGridLines => minorGridLines.Visible(true))
            .Labels(labels => labels
                .Format("{0:N0}%")
                .Skip(2)
                .Step(2)

            )
              .AxisCrossingValue(0)
              .Max(120)
        )
            .Tooltip(tooltip => tooltip
            .Visible(true)
            .Shared(true)
            .Format("%{0:N1}")
        )
        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
              //.Labels(labels => labels.Format("dd-MMM-yyyy"))
            .Labels(labels => labels.Format("dd-MMM"))
            .Labels(labels => labels.Rotation(-90))
            .Crosshair(c => c.Visible(true))
        ).Zoomable(false)
        )
    </div>
</div>

<script>
            $(window).resize(function () {
                $("#chartoccupancyrate").data("kendoChart").resize();
            });

</script>

[Iliana Dyankova]

Hi,

For this scenario you can either set the seriesColors option to match the colors from the data or use the series.colorField and dataBound event to set the series color based on the data. As an example: 

@(Html.Kendo().Chart(Model)
   //....
  .Series(series =>
   {
   series.Line(model => model.OccupancyRate,
           model => model.Color)
          //...
   })
 //....
)

<script>
function onDB(e) {
   var series = this.options.series;
      for (var i = 0; i < series.length; i++) {
          series[i].color = series[i].data[0].Color;
      }
}
</script>

Regards,
Iliana Nikolova
Telerik

 

 

[medialog]

Hi, 

Thanks for your answer. 

Please check the attached file, i could change the color, but the tag red shows on every point is a problem, how can i remove this ?

Regards,

[Iliana Dyankova]

Hi,

This is not a known issue and I am not able to reproduce it on my side. Could you please provide an isolated runnable example which I could test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations?

Regards,
Iliana Nikolova
Telerik