Axes

The Chart axes provide a value scale for the plotted data series.

Depending on the series types of your project, the Chart delivers:

  • A set of category and value axes (in Categorical and Radar series).
  • A set of X and Y axes (in Scatter and Polar series).
  • No axes (in Pie and Funnel series).

Date Axes

To get a better visualization of seasonal data in your project, scale the date axis of the Bar Chart by either of the following approaches:

  • Modify the base date unit of the X-axis through the :category-axis-base-unit prop. :category-axis-base-unit accepts the second, minute, hour, day, week, month, and year values.
  • Modify the default aggregates of the series through the :series-aggregate prop. :series-aggregate accepts the max, min, sum, avg and count values.
<div id="vueapp" class="vue-app">
    <div style="width: 45%;display: inline-block;">
        <h4>Base date unit</h4>
        <div>
            <div>
                <input id="baseUnitAuto"
                    name="baseUnit"
                    type="radio"
                    value=""
                    autocomplete="off"
                    v-model="baseUnit" />
                <label for="baseUnitAuto">Automatic (default)</label>
            </div>
            <div>
                <input id="baseUnitYears"
                    name="baseUnit"
                    type="radio"
                    value="years"
                    autocomplete="off"
                    v-model="baseUnit" />
                <label for="baseUnitYears">Years</label>
            </div>
            <div>
                <input id="baseUnitMonths"
                    name="baseUnit"
                    type="radio"
                    value="months"
                    autocomplete="off"
                    v-model="baseUnit" />
                <label for="baseUnitMonths">Months</label>
            </div>
            <div>
                <input id="baseUnitWeeks"
                    name="baseUnit"
                    type="radio"
                    value="weeks"
                    checked="checked"
                    autocomplete="off"
                    v-model="baseUnit" />
                <label for="baseUnitWeeks">Weeks</label>
            </div>
            <div>
                <input id="baseUnitDays"
                    name="baseUnit"
                    type="radio"
                    value="days"
                    autocomplete="off"
                    v-model="baseUnit" />
                <label for="baseUnitDays">Days</label>
            </div>
        </div>
    </div>
    <div style="width: 45%;display: inline-block;">
        <h4>Aggregate function</h4>
        <div>
            <div>
                <input id="aggregateMax"
                       name="aggregate"
                       type="radio"
                       value="max"
                       autocomplete="off"
                       v-model="aggregate"/>
                <label for="aggregateMax">Max (default)</label>
            </div>
            <div>
                <input id="aggregateMin"
                       name="aggregate"
                       type="radio"
                       value="min"
                       autocomplete="off"
                       v-model="aggregate" />
                <label for="aggregateMin">Min</label>
            </div>
            <div>
                <input id="aggregateSum"
                       name="aggregate"
                       type="radio"
                       value="sum"
                       autocomplete="off"
                       v-model="aggregate" />
                <label for="aggregateSum">Sum</label>
            </div>
            <div>
                <input id="aggregateAvg"
                       name="aggregate"
                       type="radio"
                       value="avg"
                       checked="checked"
                       autocomplete="off"
                       v-model="aggregate" />
                <label for="aggregateAvg">Avg</label>
            </div>
            <div>
                <input id="aggregateCount"
                       name="aggregate"
                       type="radio"
                       value="count"
                       autocomplete="off"
                       v-model="aggregate" />
                <label for="aggregateCount">Count</label>
            </div>
        </div>
    </div>

    <kendo-chart ref="chart"
                 :data-source="stats"
                 :category-axis-base-unit="baseUnit"
                 :category-axis-major-grid-lines-visible="false"
                 :value-axis="valueAxis"
                 :theme="'sass'">
        <kendo-chart-series-item :type="'column'"
                                 :aggregate="aggregate"
                                 :field="'value'"
                                 :category-field="'date'">
        </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            aggregate: 'avg',
            baseUnit: 'weeks',
            stats: [
                { value: 30, date: new Date("2011/12/20") },
                { value: 50, date: new Date("2011/12/21") },
                { value: 45, date: new Date("2011/12/22") },
                { value: 40, date: new Date("2011/12/23") },
                { value: 35, date: new Date("2011/12/24") },
                { value: 40, date: new Date("2011/12/25") },
                { value: 42, date: new Date("2011/12/26") },
                { value: 40, date: new Date("2011/12/27") },
                { value: 35, date: new Date("2011/12/28") },
                { value: 43, date: new Date("2011/12/29") },
                { value: 38, date: new Date("2011/12/30") },
                { value: 30, date: new Date("2011/12/31") },
                { value: 48, date: new Date("2012/01/01") },
                { value: 50, date: new Date("2012/01/02") },
                { value: 55, date: new Date("2012/01/03") },
                { value: 35, date: new Date("2012/01/04") },
                { value: 30, date: new Date("2012/01/05") }
            ],
            valueAxis: [{
                line: {
                    visible: false
                }
            }]
        }
    }
})

Logarithmic Axes

A logarithmic axis is a special numeric axis that transforms the actual values by using a logarithmic function with a particular base. Logarithmic axes are suitable for displaying values which cover different orders of magnitude because they allow the Chart to render large together with small values in a more condensed scale than the default linear axis.

The following example demonstrates how to use a logarithmic axis for the Column Chart by setting the :value-axis-type="'log'" prop.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Fibonacci sequence'"
                 :series="series"
                 :value-axis-type="'log'"
                 :value-axis-minor-grid-lines-visible="true"
                 :tooltip-visible="true"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                data: this.fibonacciSequence(39)
            }]
        }
    },
    methods: {
        fibonacciSequence: function(n) {
            var data = [1, 1];

            for (var i = 2; i < n; i++) {
                data.push(data[i - 1] + data[i - 2]);
            }

            return data;
        }
    }
})

Multiple Axes

To leverage the Chart performance and visualize data on any number axis for providing solid business reports, the Bar Chart supports multiple axes.

The following example demonstrates how to implement a hybrid car-range report that is visualized through the km, miles, miles per gallon, and liters per 100km value axes. Each value axis has a unique name that is set through the valueAxis.title configuration. To specify the alignment of the value axes, populate the categoryAxis.axisCrossingValue array with values.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Hybrid car mileage report'"
                 :legend-position="'top'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                type: "column",
                data: [20, 40, 45, 30, 50],
                stack: true,
                name: "on battery",
                color: "#cc6e38"
            }, {
                type: "column",
                data: [20, 30, 35, 35, 40],
                stack: true,
                name: "on gas",
                color: "#ef955f"
            }, {
                type: "line",
                data: [30, 38, 40, 32, 42],
                name: "mpg",
                color: "#ec5e0a",
                axis: "mpg"
            }, {
                type: "line",
                data: [7.8, 6.2, 5.9, 7.4, 5.6],
                name: "l/100 km",
                color: "#4e4141",
                axis: "l100km"
            }],
            valueAxis: [{
                title: { text: "miles" },
                min: 0,
                max: 100
            }, {
                name: "km",
                title: { text: "km" },
                min: 0,
                max: 161,
                majorUnit: 32
            }, {
                name: "mpg",
                title: { text: "miles per gallon" },
                color: "#ec5e0a"
            }, {
                name: "l100km",
                title: { text: "liters per 100km" },
                color: "#4e4141"
            }],
            categoryAxis: {
                categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                // Align the first two value axes to the left
                // and the last two to the right.
                //
                // Right alignment is done by specifying a
                // crossing value greater than or equal to
                // the number of categories.
                axisCrossingValues: [0, 0, 10, 10]
            }
        }
    }
})

In this article