panes.background String

The background color of the chart pane. Accepts a valid CSS color string, including hex and rgb.

Example - set the chart panes background as a hex string

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { data: [1, 2, 3] },
    { data: [1, 2, 3, 4], axis: "bottom" }
  ],
  valueAxis: [
    { pane: "top-pane" },
    { pane: "bottom-pane", name: "bottom" }
  ],
  panes: [
    { name: "top-pane", background: "#00ff00" },
    { name: "bottom-pane", background: "#ff00ff" }
  ]
});
</script>

Example - set the chart panes background as a RGB value

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { data: [1, 2, 3] },
    { data: [1, 2, 3, 4], axis: "bottom" }
  ],
  valueAxis: [
    { pane: "top-pane" },
    { pane: "bottom-pane", name: "bottom" }
  ],
  panes: [
    { name: "top-pane", background: "rgb(0, 255, 0)" },
    { name: "bottom-pane", background: "rgb(255, 0, 255)" }
  ]
});
</script>

Example - set the chart panes background by name

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { data: [1, 2, 3] },
    { data: [1, 2, 3, 4], axis: "bottom" }
  ],
  valueAxis: [
    { pane: "top-pane" },
    { pane: "bottom-pane", name: "bottom" }
  ],
  panes: [
    { name: "top-pane", background: "red" },
    { name: "bottom-pane", background: "green" }
  ]
});
</script>