Back to Back Bar Chart

7 posts, 1 answers
  1. Joe
    Joe avatar
    7 posts
    Member since:
    Nov 2013

    Posted 09 Feb Link to this post

    Hello,

    We are trying to replicate this style of chart:  https://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/  

    Is it possible to accomplish this with Kendo UI?

    We don't need two bars on the same line, but we would have a bar that extends into either a postive or negative x-axis with a 0 starting point. The positive/negative would represent a series (such as male/female) in the above example.   We would also want to show the labels of the Value axis on the outside end of the bar, and the value label on the inside end (such as showing the "age" category label next to the bar, with the value inside the bar with above example).

     

    Thanks.

     

  2. Joe
    Joe avatar
    7 posts
    Member since:
    Nov 2013
  3. Kendo UI is VS 2017 Ready
  4. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 09 Feb Link to this post

    I would do this by using 2 category axes.  One for the middle of the chart with no labels and one at the left with the labels:

    DOJO Demo 

    $("#chart").kendoChart({
        theme: "metro",
        dataSource: {
            data: [
                { value: -10, key: "0 - 4",  },
                { value:  20, key: "5 - 9",  },
                { value:  30, key: "10 - 14",   },
                { value:  30, key: "15 - 19",  },
                { value:  40, key: "20 - 24",  },
                { value: -50, key: "25 - 29",  },
                { value:  60, key: "30 - 34", },
                { value:  70, key: "35 - 39",  },
            ]
        },
        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "bar",
            gap: 0.25,
        },
        series: [{
          name: "SeriesName",
          field: "value",
          categoryField: "key",
          labels: {
            visible: true,
            position: "insideEnd"
          }              
        }],
        valueAxis: {
            line: { visible: false},
            majorGridLines: {visible: false},
            axisCrossingValue: [0, -Infinity]
        },
        categoryAxis: [{
            labels:{visible:false},
        },{
          line: { visible: false},
          field: "key",
          majorGridLines: {visible: true }
        }],
        tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
        },
    });

  5. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 09 Feb in reply to EZ Link to this post

    The above solution also works for stacked bars:  http://dojo.telerik.com/@ezanker/IZeTE
  6. Joe
    Joe avatar
    7 posts
    Member since:
    Nov 2013

    Posted 09 Feb in reply to EZ Link to this post

    This is close to what I want and I was able to get this as well.

     The main component that is missing is to have the two labels that covers the positive and negative sections of the x-axis.  See attached screenshot.

  7. Answer
    EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 09 Feb in reply to Joe Link to this post

    I guess you could use the visual property of the axis title:

    Updated DOJO 

     

    valueAxis: {
        title: {
           text: "Female Male",
           visual: function (e) {
             if (e.sender){
               console.log(e.sender);
               var spacing = e.sender.element.width() / 2
              
                var layout = new kendo.drawing.Layout(e.rect, {
                  orientation: "horizontal",
                  alignContent: "end",
                  alignItems: "center",
                  justifyContent: "center",
                  spacing: spacing
                });
                var words = e.text.split(" ");
                for (var i = 0; i < words.length; i++) {
                  var text = new kendo.drawing.Text(words[i], null, {
                      font: "16px arial"
                  });
     
                  layout.append(text);
                }
                layout.reflow();
                return layout;
               }
            }                        
        },
        line: { visible: false},
        majorGridLines: {visible: false},
        axisCrossingValue: [0, -Infinity]
    },

  8. Joe
    Joe avatar
    7 posts
    Member since:
    Nov 2013

    Posted 09 Feb in reply to EZ Link to this post

    Thanks.  Marked answer.
Back to Top
Kendo UI is VS 2017 Ready