Domanda

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.

Anyone knows how do this?

Here's the code for the line chart

var values = [{
    "Name": "Good",
    "DateReported": "2014-03-11",
    "valueX": 75
}, {}...{}...{}];

$('#chart').kendoChart({
    dataSource: {
            data: values
        },
        chartArea: {
            height: 350
        },
        title: {
            text: "Your score board"
        },
        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's a jsFiddle with where I'm at for the moment, using "valueAxis.notes".

È stato utile?

Soluzione

I just solved this by 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.

So my settings for the notes in the valueAxis section looks something like this:

notes: {
position: "bottom",
icon: {
    background: "orange",
    visible: false
},
line: {
    width: 0
},
data: [{
    value: 5, // instead of 0
    label: {
        position: "outside",
        text: "Lousy"
    }
}, {
    value: 30, // instead of 25
    label: {
        position: "outside",
        text: "Bad"
    }
}....

Here is the updated jsFiddle.

I hope this might shed some light to any fellow kendo chart cusomizer :) Even though there's hardly anyone who's even read this question :P

Cheers!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top