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/