Kendo Barchart Category Labels Left And Right Based On Value

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 se

Solution 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/