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

PaneDefaults

configuration

The default options for all panes.

paneDefaults

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  paneDefaults: {
    background: "lightgray",
    border: {
      color: "blue",
      width: 1
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

paneDefaults.background

String

The background color of all chart panes. 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" }
  ],
  paneDefaults: {
    background: "#00ff00"
  },
  panes: [
    { name: "top-pane" },
    { name: "bottom-pane" }
  ]
});
</script>

paneDefaults.border

Object

The border of all chart panes.

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

paneDefaults.clip

Boolean

Specifies whether the charts in the panes 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 }
  ],
  paneDefaults: {
    clip: false
  },
  panes: [
    { name: "top-pane" },
    { name: "bottom-pane" }
  ]
});
</script>

paneDefaults.height

Number

The default 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" }
  ],
  paneDefaults: {
    height: 200
  },
  panes: [
    { name: "top-pane" },
    { name: "bottom-pane"  }
  ]
});
</script>

paneDefaults.margin

Number|Object

The margin of the panes. 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" }
  ],
  paneDefaults: {
    margin: 10
  },
  panes: [
    { name: "top-pane" },
    { name: "bottom-pane" }
  ]
});
</script>

paneDefaults.padding

Number|Object

The padding of the panes. 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" }
  ],
  paneDefaults: {
    padding: 10
  },
  panes: [
    { name: "top-pane" },
    { name: "bottom-pane" }
  ]
});
</script>

paneDefaults.title

String|Object

The title configuration of the all panes.

<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" }
  ],
  paneDefaults: {
      title: {
        font: "700 14px sans-serif"
      }
  },
  panes: [
    { name: "top-pane",
      title: {
        text: "Top"
      }
    },
    { name: "bottom-pane",
      title: {
        text: "Bottom"
      }
    }
  ]
});
</script>

Related Members