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

ValueAxis.notes.data

configuration

The items of the notes.

valueAxis.notes.data

Array

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [10, 15, 8, 12, 18, 6, 14],
    valueAxis: {
        notes: {
            data: [
                { value: 8, icon: { background: "red" } },
                { value: 18, icon: { background: "green" } },
                { value: 6, icon: { background: "orange" } }
            ]
        }
    }
});
</script>

valueAxis.notes.data.icon

Object

The icon of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        notes: {
            data: [{
                value: 15,
                text: "Target",
                icon: {
                    background: "red",
                    size: 20,
                    type: "circle"
                }
            }]
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.notes.data.label

Object

The label of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        notes: {
            data: [{
                value: 15,
                text: "Target",
                label: {
                    background: "#ffff00",
                    color: "#000000",
                    position: "outside"
                }
            }]
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.notes.data.line

Object

The line of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    valueAxis: {
        notes: {
            data: [{
                value: 15,
                text: "Target",
                line: {
                    width: 3,
                    color: "red"
                }
            }]
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.notes.data.position

String

The position of the value 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({
    type: "column",
    valueAxis: {
        notes: {
            data: [{
                value: 15,
                text: "Target",
                position: "left"
            }]
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

valueAxis.notes.data.value

Object

The value of the note.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [10, 15, 8, 12, 18, 6, 14],
    valueAxis: {
        notes: {
            data: [
                { value: 12 },
                { value: 15 },
                { value: 8 }
            ]
        }
    }
});
</script>

ValueAxis.notes.data

valueAxis.notes.data

valueAxis.notes.data.icon

valueAxis.notes.data.label

valueAxis.notes.data.line

valueAxis.notes.data.position

valueAxis.notes.data.value

Related Members