StackBar Chart grouping, dataSource groping

2 posts, 0 answers
  1. Vladyslav
    Vladyslav avatar
    6 posts
    Member since:
    Dec 2014

    Posted 07 Mar 2015 Link to this post

    I have a question related to stackbar charts.

    I have 2 series and dataSoursce grouping.
    I'm trying to use 'StackBar style' on one of series, but I want to keep another in 'bar style'.

    And I have a following problem.
    Those columns are stacked. Even if I'm trying to disable second series.

    Please have a look here:

    I need a chart that will look like something like this:

    but with first example configuration.

    Is it possible?


  2. T. Tsonev
    T. Tsonev avatar
    2817 posts

    Posted 11 Mar 2015 Link to this post


    The first example is using a rather old version from 2012.
    It's bound to have some problems so I've updated the snippet.

    We need to assign a named stack for the second series to make it clear that we don't want to share the same stack.
      series: [{
        type: "column",
        field: "Expense",
        stack: 'group_1'
        type: "column",
        field: "Expense",
        stack: "group_2"

    We don't check specifically for false and treat "stack: false" as undefined.
    This is worth investigating as we have a clearly stated intent that shouldn't be ignored.

    This gets us somewhere, but the grouping will generate two series for the second group.
    Not sure if this is the desired result.

    An alternative would be to update the stack setting on the series after grouping has been done.
    The dataBound event gives us opportunity do this. See this snippet for a demo.

    I hope this helps.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top