Kendo UI Chart - Render a Bar Series Bottom-Up when Value Axis is inverted (Top Down)

Question

I have a Kendo UI Chart where I am displaying 3 series of data, on 3 different value axis.

The "Ad Position" value axis is inverted, with 1 being highest possible value (As per image).

As you can see, this results in the "Ad Position" series rendering "top down".

Does anyone know of a way to force this series to render "bottom up", e.g. for the bar to start rendering from the lowest value (4.5).

Javascript:

var categories = Array();
var series1 = Array();
var series2 = Array();
var series3 = Array();

// data is populated by parsing a html table
// $chart is passed in as a variable
$chart.kendoChart({                
    theme: "bootstrap",                
    title: {
        text: "Hour of Day Avg. Position"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "line",                    
    },
    series: [{
        data: series1,
        name: "Avg. Ctr",
        tooltip: {
            visible: true,
            template: "#= category #: #= value #%"                        
        },
        axis: "ctr"
    },
    {
        type: "bar",
        data: series2,
        name: "Avg. Position",
        tooltip: {
            visible: true,
            template: "#= category #: #= value # Avg. Pos."
        },
        axis: "adPos"
    },
    {
        data: series3,
        name: "Clicks",
        tooltip:
        {
            visible: true,
            template: "#= category #: #= value # Clicks"
        },
        axis: "clicks"
    }],
    valueAxes: [
    {
        title: { text: "Click Through Rate" },
        name: "ctr",
        labels: {
            visible: true,
            format: "{0}%"
        }
    },
    {
        title: {text: "Clicks per Hour"},
        name: "clicks",
        labels: {
            visible: true,
            format: "{0}"
        }
    },
    {
        title: { text: "Ad Position" },
        name: "adPos",                    
        labels: {
            visible: true,
            format: "{0}"
        },
        min: 1,
        reverse: true
    }],
    categoryAxis: {
        categories: categories,
        labels: {
            rotation: 45
        },
        title: {
            text: "Hour of Day (24Hr)"
        },
        reverse: false,
        axisCrossingValues: [0,30]
    }
    });

Answer 1

Direct answer from Telerik:

Generally speaking, the reverse: true property of the axis only reverse the axis direction and not changes the point of intersection for both and category axes. Hence in order to get the desired outcome you should specify the axisCrossingValue of the "adPos" value axis. For example:

$("#chart").kendoChart({
    //....
    valueAxes: [
        //....
    },
    {
        title: { text: "Ad Position" },
        name: "adPos",                   
        //....
        reverse: true,
        axisCrossingValues: 50
    }]
}); 

Answer 2

This is not supported, but I you can achieve something similar with a hidden axis. It should be with the same range, but in the normal direction:

series: [{
   axis: "hidden"
   // ...
}],
valueAxes: [{
  reverse: true,
  min: 1,
  max: 4.5
}, {
  visible: false,
  name: "hidden",
  min: 1,
  max: 4.5
}]

Please, see this jsBin for a working demo.

An alternative approach is to use the candlestick series to emulate range bars. The idea is to use only one pair of values for open/low and high/close. See a demo here.

Still, a dedicated range bar chart would make the best solution. Feel free to cast your vote on UserVoice.