Hide Chart Y Axis

[Hannah]

I'm trying to eliminate the chart's y axis. I can accomplish this through CSS, but then I have a margin to eliminate. I'd rather do this through the JS, but the kendo examples weren't working in Kendo Dojo so I'm not sure of the correct way to do this.

This is my HTML

<span class="w50 left">"Job Name"</span>
<span class="">
      <div id="profitChart" ></div>
</span>

This is my CSS to hide it (I commented this out to take the screen grab - see attached)

/*hides sidebar of Cost Discount Profit Bar*/
#k10000 > path:first-child, #k10000 > path:nth-child(2), #k10000 > path:nth-child(3){
    display:none !important;
}

This is my JS

// Creates the Profit bar chart on Job Info screen
function createChart() {
    $("#profitChart").kendoChart({
        chartArea: {
            height: 80,
            margin: {
                top:5,
                bottom:5
            }
        },
        //title: {
        //    text: "Job Name"
        //},
        legend: {
            visible: true,
            position: "bottom",
            labels: {
              font: "20px sans-serif",
            }
        },
        seriesDefaults: {
            type: "bar",
            stack: {
                type: "100%"
            }
        },
        series: [{
            name: "Cost",
            data: [50],
            color: "#3498db"
        },  {
            name: "Discount",
            data: [10],
            color: "#FFA500"
        }, {
            name: "Profit",
            data: [40],
            color: "#61B329"
        }],

        valueAxis: {
            visible: false,
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
                visible: false
            }
        },

        categoryAxis: {
            categories: [],
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
              visible: false
            },
        },
        tooltip: {
            visible: false,
            template: "#= series.name #: #= value #"
        },
        panes: [
        { height: 50 }]
    });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);

[Iliana Dyankova]

Hi Jon,

You can achieve the expected result as setting categoryAxis.visible option to false: 

$("#profitChart").kendoChart({
  //....
  categoryAxis: {
     visible: false,
     //....
  }
});

Regards,
Iliana Nikolova
Telerik