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

Back to Back Bar Chart

6 Answers 37 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 09 Feb 2016, 03:26 PM

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.

 

6 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 09 Feb 2016, 03:28 PM
0
EZ
Top achievements
Rank 2
answered on 09 Feb 2016, 08:16 PM

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

0
EZ
Top achievements
Rank 2
answered on 09 Feb 2016, 08:21 PM
The above solution also works for stacked bars:  http://dojo.telerik.com/@ezanker/IZeTE
0
Joe
Top achievements
Rank 1
answered on 09 Feb 2016, 08:56 PM

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.

0
Accepted
EZ
Top achievements
Rank 2
answered on 09 Feb 2016, 10:00 PM

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

0
Joe
Top achievements
Rank 1
answered on 09 Feb 2016, 10:05 PM
Thanks.  Marked answer.
Tags
Charts
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
EZ
Top achievements
Rank 2
Share this question
or