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

CategoryAxis.notes.data

configuration

The items of the notes.

categoryAxis.notes.data

Array

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5, 4, 3, 2],
    categoryAxis: {
        notes: {
            data: [{
                value: "Q1",
                text: "First Quarter"
            }, {
                value: "Q3", 
                text: "Third Quarter"
            }]
        }
    }
});
</script>

categoryAxis.notes.data.icon

Object

The icon of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5, 4, 3, 2],
    categoryAxis: {
        notes: {
            data: [{
                value: "Q2",
                text: "Custom Icon Note",
                icon: {
                    background: "green",
                    type: "triangle",
                    size: 20
                }
            }]
        }
    }
});
</script>

categoryAxis.notes.data.label

Object

The label of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5, 4, 3, 2],
    categoryAxis: {
        notes: {
            data: [{
                value: "Q2",
                text: "Second Quarter",
                label: {
                    background: "yellow",
                    color: "black",
                    template: "Note: #: value #"
                }
            }]
        }
    }
});
</script>

categoryAxis.notes.data.line

Object

The line of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5, 4, 3, 2],
    categoryAxis: {
        notes: {
            data: [{
                value: "Q2",
                text: "Custom Line Note",
                line: {
                    width: 5,
                    color: "red",
                    length: 30
                }
            }]
        }
    }
});
</script>

categoryAxis.notes.data.position

String

The position of the category axis note.

"top" - The note is positioned on the top.
"bottom" - The note is positioned on the bottom.
"left" - The note is positioned on the left.
"right" - The note is positioned on the right.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5, 4, 3, 2],
    categoryAxis: {
        notes: {
            data: [{
                value: "Q2",
                text: "Bottom Note",
                position: "bottom"
            }]
        }
    }
});
</script>

categoryAxis.notes.data.value

Object

The value of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5, 4, 3, 2],
    categoryAxis: {
        notes: {
            data: [{
                value: "Q2",
                text: "Second Quarter Note"
            }]
        }
    }
});
</script>

CategoryAxis.notes.data

categoryAxis.notes.data

categoryAxis.notes.data.icon

categoryAxis.notes.data.label

categoryAxis.notes.data.line

categoryAxis.notes.data.position

categoryAxis.notes.data.value

Related Members