Different color for each bar in bar chart for a single series

[Hari]

Hi 

I am binding a external data source to a bar chart with a single series of  data for six category values. i am getting single color for all the bars.how to get unique color for each bar?

[Hristo Germanov]

Hi Hari,

You need to use colorField in your series. http://docs.kendoui.com/api/dataviz/chart#configuration-series.colorField

Could you try it?

Regards,
Hristo Germanov
Telerik

[Nusrat]

You can add a Group for different colors within a series. I achieved it using below code. 

@(Html.Kendo().Chart<WellBasinData>()
   .Name("chart")
   .HtmlAttributes(new { style = "height:95%" })
   .DataSource(dataSource => dataSource
   .Read(read => read.Action("GetWellChartBasin", "Home").Data("ReadRequestData"))
   .Group(group => group.Add(model => model.Basin))
   .Sort(sort => sort.Add(model => model.Basin).Ascending())
   )
.ChartArea(chartArea => chartArea
.Background("DarkGrey"))
.Series(series =>
   {

   series.Column(model => model.NoOfWells, model => model.Basin)
   .Tooltip(tooltip => tooltip.Visible(true)

   .Template("#= series.name #: #= value #"))
   .Overlay(o => o.Gradient(ChartSeriesGradient.None))
   //.Name("#= group.value # (No of Wells)")
   .CategoryField("Basin");
   })
   .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))
   .Title(s => s.Color("White").Font("18px bold"))
   .Events(events => events.DataBound("onDataBound"))
//.CategoryAxis(axis => axis
// .Labels(labels => labels.Format("MMM"))
//)
)

01.@(Html.Kendo().Chart<WellBasinData>()
02.           .Name("chart")
03.           .HtmlAttributes(new { style = "height:95%" })
04.           .DataSource(dataSource => dataSource
05.               .Read(read => read.Action("GetWellChartBasin", "Home").Data("ReadRequestData"))
06.               .Group(group => group.Add(model => model.Basin))
07.               .Sort(sort => sort.Add(model => model.Basin).Ascending())
08.           )
09.            .ChartArea(chartArea => chartArea
10.            .Background("DarkGrey"))
11.            .Series(series =>
12.           {
13.
14.               series.Column(model => model.NoOfWells, model => model.Basin)
15.               .Tooltip(tooltip => tooltip.Visible(true)
16.
17.               .Template("#= series.name #: #= value #"))
18.               .Overlay(o => o.Gradient(ChartSeriesGradient.None))
19.
20.               .CategoryField("Basin");
21.           })
22.           .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))
23.           .Title(s => s.Color("White").Font("18px bold"))
24.           .Events(events => events.DataBound("onDataBound"))
25.
26.    )

[Nusrat]

You can add a Group for different colors within a series. I achieved it using below code. 
@(Html.Kendo().Chart<WellBasinData>()
   .Name("chart")
   .HtmlAttributes(new { style = "height:95%" })
   .DataSource(dataSource => dataSource
   .Read(read => read.Action("GetWellChartBasin", "Home").Data("ReadRequestData"))
   .Group(group => group.Add(model => model.Basin))
   .Sort(sort => sort.Add(model => model.Basin).Ascending())
   )
.ChartArea(chartArea => chartArea
.Background("DarkGrey"))
.Series(series =>
   {

   series.Column(model => model.NoOfWells, model => model.Basin)
   .Tooltip(tooltip => tooltip.Visible(true)

   .Template("#= series.name #: #= value #"))
   .Overlay(o => o.Gradient(ChartSeriesGradient.None))
   //.Name("#= group.value # (No of Wells)")
   .CategoryField("Basin");
   })
   .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))
   .Title(s => s.Color("White").Font("18px bold"))
   .Events(events => events.DataBound("onDataBound"))
//.CategoryAxis(axis => axis
// .Labels(labels => labels.Format("MMM"))
//)
)