Bar Chart - Reverse Y (valueAxis) without rendering from top-down.

[Monte]

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]
    }
    });

Thank you for your help.

[Iliana Dyankova]

Hi Jeremy,

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
   }
  ]
});

Kind regards,
Iliana Nikolova
the Telerik team