This is a migrated thread and some comments may be shown as answers.

ValueAxis custom text labels

1 Answer 406 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 22 Mar 2014, 12:58 PM
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.

$(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.

1 Answer, 1 is accepted

Sort by
0
Andreas
Top achievements
Rank 1
answered on 24 Mar 2014, 08:29 AM
I just solved this on myself by offsetting the notes I'm using as labels by setting the "value" to 5 instead of 0, 30 instead 25, 55 instead of 50 etc.

Here is the updated jsFiddle.
Tags
Charts
Asked by
Andreas
Top achievements
Rank 1
Answers by
Andreas
Top achievements
Rank 1
Share this question
or