New to Kendo UI for jQuery? Start a free 30-day trial

Panes

configuration

The chart panes configuration.

Panes are used to split the chart in two or more parts. The panes are ordered from top to bottom.

Each axis can be associated with a pane by setting its pane option to the name of the desired pane. Axis that don't have specified pane are placed in the top (default) pane.

Series are moved to the desired pane by associating them with an axis.

panes

Array

<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" },
    { name: "bottom-pane" }
  ]
});
</script>

panes.background

String

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

<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>

<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>

<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>

panes.border

Object

The border of the chart pane.

<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",
      border: {
        color: "red",
        width: 2
      }
    },
    { name: "bottom-pane",
      border: {
        color: "green",
        width: 2
      }
    }
  ]
});
</script>

panes.clip

Boolean

Specifies whether the charts in the pane should be clipped. By default all charts except radar, polar and 100% stacked charts are clipped.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    type: "line"
  },
  series: [
    { data: [1, 100, 1] },
    { data: [1, 100, 1], axis: "bottom" }
  ],
  valueAxis: [
    { pane: "top-pane", max: 70 },
    { pane: "bottom-pane", name: "bottom", max: 70 }
  ],
  panes: [
    { name: "top-pane" },
    { name: "bottom-pane", clip: false}
  ]
});
</script>

panes.height

Number

The chart pane height in pixels.

<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", height: 200 },
    { name: "bottom-pane", height: 300  }
  ]
});
</script>

panes.margin

Number|Object

The margin of the pane. A numeric value will set all margins.

Default: 0

<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", margin: 10 },
    { name: "bottom-pane", margin: 10 }
  ]
});
</script>

panes.name

String

The unique name of the chart pane.

<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" },
    { name: "bottom-pane" }
  ]
});
</script>

panes.padding

Number|Object

The padding of the pane. A numeric value will set all paddings.

Default: 0

<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", padding: 10 },
    { name: "bottom-pane", padding: 10 }
  ]
});
</script>

panes.title

String|Object

The title configuration of the chart pane.

The panes.title.text option must be set in order to display the title.

<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",
      title: {
        text: "Top"
      }
    },
    { name: "bottom-pane",
      title: {
        text: "Bottom"
      }
    }
  ]
});
</script>

Related Members