categoryAxis.title

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            color: "#ff0000",
            font: "14px Arial"
        }
    }
});
</script>

categoryAxis.title.background

String

The background color of the title. Any valid CSS color string will work here, including hex and rgb.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            background: "#ffe0e0"
        }
    }
});
</script>

categoryAxis.title.border

Object

The border of the title.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            border: {
                color: "#ff0000",
                width: 2,
                dashType: "dash"
            }
        }
    }
});
</script>

categoryAxis.title.color

String

The text color of the title. Any valid CSS color string will work here, including hex and rgb.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            color: "#0000ff"
        }
    }
});
</script>

categoryAxis.title.font

String

The font style of the title.

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            font: "18px Verdana"
        }
    }
});
</script>

categoryAxis.title.margin

Number|Object

The margin of the title.

Default: 5

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            margin: 10
        }
    }
});
</script>

categoryAxis.title.position

String

The position of the title.

"top"

The axis title is positioned on the top (applicable to vertical axis)

"bottom"

The axis title is positioned on the bottom (applicable to vertical axis)

"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="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            position: "left"
        }
    }
});
</script>

categoryAxis.title.rotation

Number

The rotation angle of the title.

Default: 0

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            rotation: 45
        }
    }
});
</script>

categoryAxis.title.text

String

The text of the title.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Custom Category Title"
        }
    }
});
</script>

categoryAxis.title.visible

Boolean

The visibility of the title.

Default: true

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            visible: false
        }
    }
});
</script>

Related Members