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

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

3 Answers 581 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Hari
Top achievements
Rank 1
Hari asked on 18 Sep 2013, 07:11 AM
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?

3 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 19 Sep 2013, 10:41 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nusrat
Top achievements
Rank 1
answered on 23 Dec 2019, 09:12 AM

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.    )
0
Nusrat
Top achievements
Rank 1
answered on 23 Dec 2019, 09:23 AM
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"))
//)
)
Tags
Charts
Asked by
Hari
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Nusrat
Top achievements
Rank 1
Share this question
or