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

Title

configuration

The chart title configuration options or text.

title

Object`, `String

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    title: "Stock Chart Title",
    series: [{
        type: "line",
         data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

title.align

String

The alignment of the title.

"left"

The text is aligned to the left.

"center"

The text is aligned to the middle.

"right"

The text is aligned to the right.

Default: "center"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    title: {
        text: "Stock Chart Title",
        align: "left"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

title.background

String

The background color of the title.

Default: "white"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    title: {
        text: "Stock Chart Title",
        background: "#ff0000"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

title.border

Object

The border of the title.

pseudo

    $("#chart").kendoChart({
        // set border options on the title
        title: {
            border: {
                // set the border color to a dark blue
                color: "#336699",
                // set the width of the border to 2 pixels
                width: 2,
                // set the border style to long dashes
                dashType: "longDash"
            }
        }
    });

title.color

String

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    title: {
        text: "Stock Chart Title",
        color: "#ff0000"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

title.description

String

The accessible description of the Chart. The description is announced by screen readers when the Chart is focused.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  title: {
    text: "Stock Chart",
    description: "A sample stock chart with mock data"
  },
  dataSource: {
    data: [
      { value: 1, date: new Date(2012, 1, 1)},
      { value: 2, date: new Date(2012, 1, 2)}
    ]
  },
  dateField: "date",
  series: [
    {
      field: "value",
      name: "Value"
    }
  ]
});
</script>

title.font

String

The font of the title.

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    title: {
        text: "Stock Chart Title",
        font: "20px Arial"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

title.margin

Number | Object

The margin of the title.

Default: 5

pseudo

    $("#chart").kendoChart({
        // sets the top, right, bottom and left margin to 3px.
        title: {
            margin: 3
        },
        //...
    });
    //
    $("#chart").kendoChart({
        // sets the top and left margin to 1px
        // margin right and bottom are with 5px (by default)
        title: {
            margin: { top: 1, left: 1 }
        },
        //...
    });

title.padding

Number | Object

The padding of the title.

Default: 5

pseudo

    $("#chart").kendoChart({
        // sets the top, right, bottom and left padding to 3px.
        title: {
            padding: 3
        },
        //...
    });

    $("#chart").kendoChart({
        // sets the top and left padding to 1px
        // padding right and bottom are with 5px (by default)
        title: {
            padding: { top: 1, left: 1 }
        },
        //...
    });

title.position

String

The position of the title.

"top"

The title is positioned on the top.

"bottom"

The title is positioned on the bottom.

Default: "top"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
        ]
    },
    dateField: "date",
    title: {
        text: "Stock Price",
        position: "bottom"
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high", 
        lowField: "low",
        closeField: "close"
    }]
});
</script>

title.text

String

The title of the chart. You can also set the text directly for a title with default options.

pseudo

    $("#chart ").kendoChart({
        title: {
            text: "Sales data"
        },
        //...
    });

    $("#chart ").kendoChart({
        title: "Sales data",
        //...
    });

title.visible

Boolean

The visibility of the title.

Default: false

pseudo

    $("#chart ").kendoChart({
        title: {
            // hides the title
            visible: false
        },
        //...
    });

Related Members