All Components

Radar

Radar Charts, also known as Spider Charts, are Categorical charts which wrap the X axis in a circle or polygon.

Basic Usage

The following example demonstrates the Radar Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Market Value of Major Banks'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'radarLine'"
                 :category-axis-category="categories"
                 :value-axis-labels-format="'${0}'"
                 :tooltip-visible="true"
                 :tooltip-format="'${0} bln'"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Market value as of 2007'" :data="marketOldData"></kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Market value as of 2009'" :data="marketNewData"></kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            marketOldData: [116, 165, 215, 75, 100, 49, 80, 116, 108, 90, 67, 76, 91, 255, 120],
            marketNewData: [64, 85, 97, 27, 16, 26, 35, 32, 26, 17, 10, 7, 19, 5],
            categories: [
                'Santander',
                'JP Morgan',
                'HSBC',
                'Credit Suisse',
                'Goldman Sachs',
                'Morgan Stanley',
                'Societe Generale',
                'UBS',
                'BNP Paribas',
                'Unicredit',
                'Credit Agricole',
                'Deutsche Bank',
                'Barclays',
                'Citigroup',
                'RBS'
            ]
        }
    }
})

Sub-Types

The Radar Charts feature the following sub-types:

Smooth Radar Line Charts

This demo shows how to configure smooth (spline) radar line style for the Kendo UI Radar Chart.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Budget report'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'radarLine'"
                 :series-defaults-style="'smooth'"
                 :value-axis-labels-format="'${0}'"
                 :tooltip-visible="true"
                 :tooltip-format="'${0} bln'"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Market value as of 2007'" :data="marketOldData"></kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Market value as of 2009'" :data="marketNewData"></kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            marketOldData: [116, 165, 215, 75, 100, 49, 80, 116, 108, 90, 67, 76, 91, 255, 120],
            marketNewData: [64, 85, 97, 27, 16, 26, 35, 32, 26, 17, 10, 7, 19, 5]
        }
    }
})

Radar Area Charts

This demo shows how to create a radar area chart, which series type is represented by data points connected with straight line segments that enclose a filled area. You can configure this chart from the Series -> RadarArea configuration setting.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Employment candidate review'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'radarArea'"
                 :value-axis-labels-format="'{0}%'"
                 :value-axis-line-visible="false"
                 :category-axis-categories="categories"
                 :category-axis-major-grid-lines-visible="false"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Andrew Dodsworth'" :data="andrewsData"></kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Margaret Peacock'" :data="margaretsData"></kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Nancy Callahan'" :data="nancysData"></kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            andrewsData: [10, 3, 3, 10, 2, 10],
            margaretsData: [9, 7, 7, 9, 6, 7],
            nancysData: [4, 10, 10, 5, 5, 4],
            categories: [
                "Experience", "Communication", "Friendliness",
                "Subject knowledge", "Presentation", "Education"
            ]
        }
    }
})

Radar Column Charts

This example displays how to create a radar column chart, which series type is represented as data columns whose height varies according to their value.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Nutrient balance: Apples, raw'"
                 :legend-visible="false"
                 :value-axis-visible="false"
                 :category-axis-categories="categories"
                 :theme="'sass'">
                    <kendo-chart-series-item :type="'radarColumn'" :name="'Nutrients'" :data="nutrientsData"></kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            nutrientsData: [
                5, 1, 1, 5, 0, 1,
                1, 2, 1, 2, 1, 0,
                0, 2, 1, 0, 3, 1,
                1, 1, 0, 0, 0
            ],
            categories: [
                "Df", "Pr", "A", "C", "D", "E",
                "Th", "Ri", "Ni", "B", "F", "B",
                "Se", "Mn", "Cu", "Zn", "K", "P",
                "Fe", "Ca", "Na", "Ch", "Sf"
            ]
        }
    }
})
In this article