All Components

Bullet

Bullet Charts are Categorical charts which are a variation of the Bar Charts.

You can use them as a replacement for dashboard gauges and meters. The bullet graph compares a given quantitative measure, such as temperature, against a qualitative range, such as warm, hot, and cold, and a symbol marker which encodes the comparative measure, such as the max temperature a year ago.

Basic Usage

The following example demonstrates the Bullet Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart :legend-visible=false
                 :series="series"
                 :chart-area-margin-left="0"
                 :value-axis-plot-bands="plotBands"
                 :value-axis-major-ticks-visible="false"
                 :value-axis-min="715"
                 :value-axis-max="795"
                 :value-axis-minor-ticks-visible="true"
                 :category-axis-major-grid-lines-visible="false"
                 :category-axis-major-ticks-visible="false"
                 :tooltip-visible="true"
                 :tooltip-template="tooltiptemplate"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            bulletdata: [[750, 762.5]],
            plotBands: [{
                from: 715, to: 752, color: '#ccc', opacity: 0.6
            }, {
                from: 752, to: 772, color: '#ccc', opacity: 0.3
            }],
            tooltiptemplate: 'Maximum: #= value.target # <br /> Average: #= value.current #',
            series: [{
                type: 'bullet',
                data: [[750, 762.5]]
            }]
        }
    }
})
In this article