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

set Series Colors for mvc kendo chart

3 Answers 731 Views
Charts
This is a migrated thread and some comments may be shown as answers.
medialog
Top achievements
Rank 2
medialog asked on 15 Dec 2015, 12:33 PM

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>

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 17 Dec 2015, 12:29 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
medialog
Top achievements
Rank 2
answered on 17 Dec 2015, 02:34 PM

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,

0
Iliana Dyankova
Telerik team
answered on 21 Dec 2015, 08:22 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
medialog
Top achievements
Rank 2
Answers by
Iliana Dyankova
Telerik team
medialog
Top achievements
Rank 2
Share this question
or