Kendo Line Chart

Trying to set custom valueAxis labels or notes

by anup1986

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<div id="wrap" style="padding:20px;">
    <div id="chart"></div>
</div>

CSS

#wrap {
    margin: 50px;
}

JavaScript

$(document).ready(function () {
	var values = [{
		"Name": "Good",
		"DateReported": "2014-03-11",
		"valueX": 75
	}, {
		"Name": "Good",
		"DateReported": "2014-03-12",
		"valueX": 75
	}, {
		"Name": "Normal",
		"DateReported": "2014-03-13",
		"valueX": 50
	}, {
		"Name": "Bad",
		"DateReported": "2014-03-14",
		"valueX": 25
	}, {
		"Name": "Awesome!",
		"DateReported": "2014-03-15",
		"valueX": 100
	}, {
		"Name": "Awesome!",
		"DateReported": "2014-03-15",
		"valueX": 100
	}, {
		"Name": "Good",
		"DateReported": "2014-03-16",
		"valueX": 75
	}, {
		"Name": "Awesome!",
		"DateReported": "2014-03-17",
		"valueX": 100
	}, {
		"Name": "Lousy",
		"DateReported": "2014-03-17",
		"valueX": 0
	}, {
		"Name": "Good",
		"DateReported": "2014-03-18",
		"valueX": 75
	}];

	$('#chart').kendoChart({
dataSource: {
                data: values
            },
            chartArea: {
                height: 350
            },
            title: {
                text: "Your score board"
            },
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            series: [{
                field: "valueX",
                name: "{0}",
                tooltip: {
                    visible: true,
                    template: "<b>Mood Score: </b>#= value #<br/><b>Mood: </b> #= dataItem.Name # "
                }
            }],
            valueAxis: {
                notes: {
                	position: "bottom",
                	icon: {
                		background: "orange",
                        visible: false
                	},
                    line: {
                        width: 0
                    },
                	data: [{
                		value: 5,
                		label: {
                			position: "outside",
                			text: "Lousy",
                            font: "13px Verdana"
                		}
               ...