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

PaneDefaults.title

configuration

The title configuration of the all panes.

paneDefaults.title

String|Object

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

paneDefaults.title.background

String

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  paneDefaults: {
    title: {
      background: "lightblue"
    }
  },
  panes: [
    { name: "main-pane", title: { text: "Pane Title" } }
  ],
  series: [
    { name: "Series 1", data: [1, 2, 3] }
  ]
});
</script>

paneDefaults.title.border

Object

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

paneDefaults.title.color

String

The text color of the title. 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: {
      title: {
        color: "#aa00bb"
      }
  },
  panes: [
    { name: "top-pane",
      title: {
        text: "Top"
      }
    },
    { name: "bottom-pane",
      title: {
        text: "Bottom"
      }
    }
  ]
});
</script>

paneDefaults.title.font

String

The font style of the title.

Default: "16px Arial,Helvetica,sans-serif"

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

paneDefaults.title.margin

Number|Object

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

Default: 5

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

paneDefaults.title.position

String

The position of the title.

The supported values are:

"left" - the axis title is positioned on the left (applicable to horizontal axis)
"right" - the axis title is positioned on the right (applicable to horizontal axis)
"center" - the axis title is positioned in the center

Default: "center"

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

paneDefaults.title.visual

Function

A function that can be used to create a custom visual for the title. The available argument fields are:

text - the label text.
rect - the kendo.geometry.Rect that defines where the visual should be rendered.
sender - the chart instance (may be undefined).

<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: {
      visual: function(e) {
        var rect = new kendo.geometry.Rect(e.rect.origin, [200, 30]);
        var layout = new kendo.drawing.Layout(rect, {
          spacing: 5,
          alignItems: "center"
        });
        var text = new kendo.drawing.Text(e.text, [0, 0], {
          fill: {
            color: "red"
          }
        });
        layout.append(text);
        return layout;
      }
    }
  },
  panes: [
    { name: "top-pane",
      title: {
        text: "Top"
      }
    },
    { name: "bottom-pane",
      title: {
        text: "Bottom"
      }
    }
  ]
});
</script>

options - the label options.
createVisual - a function that can be used to get the default visual.

Related Members