Kendo bar chart- plot band in both the panes - kendo-ui

Question

I have a bar chart with 2 panes. I want to add plot bands in both the panes but with different color. How can this be done?
And i want to display the categories labels at the bottom of the graph. how can this be done?
Here is the jsfiddle example: http://jsfiddle.net/An59E/27/
HTML code:
<div id="chart"></div>
JS code:
var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [70, 60, -40, 90, 10, 50];
var series4= [-50, 40, 20, -80, 70, 80];
$("#chart").kendoChart({
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series2,
color: "#CCCCCC"
},
{
data: series3,
axis: "bottom" ,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series4,
axis: "bottom" ,
color: "#CCCCCC"
}
],
categoryAxis:
[
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line: {
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
]
},
{
pane: "bottom-pane",
color: "#0099FF",
majorGridLines:
{
visible: true
},
line: {
width: 3,
},
labels:
{
margin:
{
top: 80,
bottom: 0
}
},
categories: [2005, 2006, 2007, 2008, 2009],
}
],
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis: [
{
pane: "top-pane",
title:
{
text: "Availability"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
{
pane: "bottom-pane",
name: "bottom",
title:
{
text: "Occupancy"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
}
],
panes:
[
{
name: "top-pane",
border: {
color: "#C0C0C0",
width: 1
},
},
{
name: "bottom-pane",
border: {
color: "#C0C0C0",
width: 1
}
}
],
tooltip: {
visible: true,
format: "{0}"
}
});
Thanks.

Answer 1

To add plot bands in both the panes:
plotBands: [
{
from: 95,
to: 100,
color: "#2082c8"
//color: "url(#pattern2)",
},
{
from: 125,
to: 130,
color: "#c82020"
}