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

2 posts, 1 answers
  1. Monte
    Monte avatar
    2 posts
    Member since:
    Jan 2006

    Posted 12 Dec 2012 Link to this post

    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). Chart with inverted Y Axis

    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.

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 13 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top