Kendo barchart category labels left and right based on value

Question

I'm building a Kendo bar chart that has two series that "mirror" each other. One series has negative values and the other positive values. My choices for formatting the labels seem to be limited (based on my review of the obvious options - I am not an html/javascript guru) to having them on one side or the other. I would really like to have them flow with the value of the bar and appear opposite (i.e. clear of the bar).

Here is my current chart

<div id="barchart"></div>
function setUpCharts()
        {
            $("#barchart").kendoChart({            
                title: {
                    text: "Bar Chart"
                },
                legend: {
                    visible: true,
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "bar",
                    stack: true
                },
                series: [{
                    data: [0, 0, .69, .29, .85],
                }, {
                    data: [-.80, -.56, 0, 0, 0],
                }
                ],
                categoryAxis: {
                    categories: ["Cat1", "Cat2", "Cat3", "Cat4", "Cat5"],
                    majorGridLines: { visible: false },
                },
                valueAxis: {
                    numeric: true,
                    line: { visible: false },
                    minorGridLines: { visible: true }
                }
            });
        }

It's also at: http://jsfiddle.net/xamlfishet/3jNn5/1/

Anyone have any suggestions? Much appreciated!!!

Answer 1

Thanks SO MUCH for including a fiddle! The mirroring is indeed quite tricky here. What you have to do is to first associate your series with your data items. I hope this is possible based on your setup.

$("#barchart").kendoChart({
  dataSource: {
    data: [
      { field: "Cat 1", left: -.80, right: 0 },
      { field: "Cat 2", left: -.56, right: 0 },
      { field: "Cat 3", left: 0, right: .69 },
      { field: "Cat 4", left: 0, right: .29 },
      { field: "Cat 5", left: 0, right: .58 }
    ],
  }
  series: [{
    field: "right"
   }, {
    field: "left" 
  }]
});

Now that each category is associated with a data item, you can use a template to position the label absolutely based on whether its a positive or negative value.

categoryAxis: {
  field: "field",
    labels: {
      template: function(e) {
        if (e.dataItem.right === 0) {
          return "<tspan style='position: absolute' dx='20'>" + e.value + "</tspan>"
        }
        else {
          return "<tspan style='position: absolute' dx='-30'>" + e.value + "</tspan>"
        }
      }
    },
    majorGridLines: {
      visible: false
    },
  },

Here is a working fiddle... http://jsfiddle.net/7smar/1/