I want to remove horizontal Gridlines from background of the chart. I am able to remove vertical gridlines successfully.
majorGridLines: { visible: false}
hides gridlines for y axes.
If I use same code to hide xAxes gridlines, it wont hide it.
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bar-charts/multiple-axes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
majorGridLines: {
visible: false,
},
legend: {
position: "bottom"
},
series: [ {
type: "column",
data: [2989, 270, 420, 890, 910, 1394, 1444],
stack: true,
name: "Room Revenue",
color: "#4472c3",
majorGridLines: {
visible: false,
},
}, {
type: "line",
data: [23, 5, 6, 22, 20, 16, 40],
name: "Room Sold",
color: "#12ccbe",
axis: "l100km",
majorGridLines: {
visible: false,
},
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 4000,
visible: false,
}, {
// name: "km",
// title: { text: "km" },
min: 0,
max: 161,
majorUnit: 32,
visible: false
}, {
// name: "mpg",
// title: { text: "miles per gallon" },
// color: "#ec5e0a"
visible: false
}, {
name: "l100km",
// title: { text: "liters per 100km" },
color: "#4e4141",
visible: false
}],
majorGridLines: {
visible: false,
},
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
majorGridLines: {
visible: false,
},
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
You just have the majorGridLine setting in the wrong place. Put it in the valueAxis:
function createChart() {
$("#chart").kendoChart({
legend: {
position: "bottom"
},
series: [ {
type: "column",
data: [2989, 270, 420, 890, 910, 1394, 1444],
stack: true,
name: "Room Revenue",
color: "#4472c3",
}, {
type: "line",
data: [23, 5, 6, 22, 20, 16, 40],
name: "Room Sold",
color: "#12ccbe",
axis: "l100km",
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 4000,
visible: false,
majorGridLines: {
visible: false,
},
}, {
// name: "km",
// title: { text: "km" },
min: 0,
max: 161,
majorUnit: 32,
visible: false,
majorGridLines: {
visible: false,
},
}, {
// name: "mpg",
// title: { text: "miles per gallon" },
// color: "#ec5e0a"
visible: false,
majorGridLines: {
visible: false,
},
}, {
name: "l100km",
// title: { text: "liters per 100km" },
color: "#4e4141",
visible: false,
majorGridLines: {
visible: false,
},
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
majorGridLines: {
visible: false,
},
}
});
}