Hi,
I'm trying to set custom labels on the Y-axis in a line chart, but no success. I've looked around ALOT on the forums search google without any success.
The closest to a solution I've come is to hide the actual labels and use valueAxis.notes instead.
The problem I'm facing with the notes is that the are placed directly on the horizontal lines in the chart which makes them very hard to read, and trying to use the position option doesn't seem to help anything at all. I would like to have them placed below the line, if notes are to be used.
I'd rather just be able to set the actual labels to my own strings so that instead of "0" it would say "Lousy", 25 = "Bad", 50 = "Normal" etc.
Here's is my code for the chart.
And here is a jsFiddle.
I'm trying to set custom labels on the Y-axis in a line chart, but no success. I've looked around ALOT on the forums search google without any success.
The closest to a solution I've come is to hide the actual labels and use valueAxis.notes instead.
The problem I'm facing with the notes is that the are placed directly on the horizontal lines in the chart which makes them very hard to read, and trying to use the position option doesn't seem to help anything at all. I would like to have them placed below the line, if notes are to be used.
I'd rather just be able to set the actual labels to my own strings so that instead of "0" it would say "Lousy", 25 = "Bad", 50 = "Normal" etc.
Here's is my code for the chart.
$(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:
"Dina rapporterade känslor"
},
legend: {
visible:
false
},
seriesDefaults: {
type:
"line"
,
style:
"smooth"
,
labels: {
visible:
false
,
}
},
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"
},
data: [{
value: 0,
label: {
position:
"outside"
,
text:
"Lousy"
}
}, {
value: 25,
label: {
position:
"outside"
,
text:
"Bad"
}
}, {
value: 50,
label: {
position:
"outside"
,
text:
"Normal"
}
}, {
value: 75,
label: {
position:
"outside"
,
text:
"Good"
}
}, {
value: 100,
label: {
position:
"outside"
,
text:
"Awesome"
}
}]
},
title: {
visible:
false
},
max: 100,
majorUnit: 25,
labels: {
format:
"{0}"
,
visible:
false
,
},
line: {
visible:
false
}
},
categoryAxis: {
title: {
visible:
false
},
labels: {
rotation: -45
},
field:
"DateReported"
,
majorGridLines: {
visible:
false
}
}
});
});
And here is a jsFiddle.