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

4 posts, 0 answers
  1. Hari
    Hari avatar
    6 posts
    Member since:
    Sep 2013

    Posted 18 Sep 2013 Link to this post

    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?
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 19 Sep 2013 Link to this post

    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!
  3. Nusrat
    Nusrat avatar
    2 posts
    Member since:
    May 2014

    Posted 23 Dec 2019 in reply to Hristo Germanov Link to this post

    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.    )
  4. Nusrat
    Nusrat avatar
    2 posts
    Member since:
    May 2014

    Posted 23 Dec 2019 in reply to Hari Link to this post

    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"))
    //)
    )
Back to Top