Axes

The Chart enables you to set its axis title, plot bands, and apply global settings to all axes.

Configuring the Title

To clearly indicate the role of the axis, add an axis title.

$("#container").kendoChart({
    title: {
        text: "Average temperature and humidity"
    },
    legend: {
        position: "bottom"
    },
    series: [{
            name: "Temperature",
            data: [20, 25, 32],
            axis: "temperature"
        }, {
            name: "Humidity",
            data: [45, 50, 80],
            axis: "humidity"
    }],
    categoryAxis: {
        categories: ["Aug", "Sep", "Oct"],
        axisCrossingValue: [0, 3]
    },
    valueAxis: [{
        name: "temperature",
        title: {
            text: "Temperature, Celsius"
        }
    }, {
        name: "humidity",
        title: {
            text: "Relative Humidity"
        }
    }]
});

A chart with axis titles

Setting the Plot Bands

You can configure each axis so that it displays bands with different colors for predefined value ranges. The category index (zero based) is used as a value for the category axis.

valueAxis: [{
    name: "temperature",
    title: {
        text: "Temperature, Celsius"
    },
    plotBands: [{
        from: 30,
        to: 40,
        color: "#f99"
    }]
    }, {
    name: "humidity",
    title: {
        text: "Relative Humidity"
    }
}]

A Chart with axis plot bands

Applying Global Settings

To apply settings to all axes, use the axisDefaults object.

$("#chart").kendoChart({
    series: [{
        type: "scatter",
        name: "Pentium D 915",
        data: [[120, 102]]
    }],
    axisDefaults: {
        labels: {
            font: "16px Verdana"
        }
    }
});

See Also

In this article
Not finding the help you need? Improve this article