Back to Back Bar Chart

[Joe]

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.

 

[Joe]

Fixed hyperlink:

https://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/

[EZ]

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 #"
    },
});

[EZ]

The above solution also works for stacked bars:  http://dojo.telerik.com/@ezanker/IZeTE

[Joe]

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.

[EZ]

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]
},

[Joe]

Thanks.  Marked answer.