Edit this page

Bullet Charts

The Kendo UI Bullet Chart HtmlHelper for ASP.NET Core is a variation of a Bar chart. You can use it to visualize a comparison between an expected (target) and actual (current) value. For example, with a Bullet Chart you can display company profit, employee performance, weather data and so on.


Use Bullet and VerticalBullet in the Series configuration to create a Bullet series in the Chart helper.


Axes are configured through the CategoryAxis and ValueAxis settings. Multiple value axes are supported.

        .Legend(legend => legend
        .Series(series => {
            series.Bullet(new double[][] { new double[] { 750, 762.5 }});
        .ChartArea(chartArea => chartArea.Margin(0))
        .CategoryAxis(axis => axis
            .MajorGridLines(lines => lines.Visible(false))
            .MajorTicks(lines => lines.Visible(false))
        .ValueAxis(axis => axis
            .MinorTicks(lines => lines.Visible(true))
            .MajorGridLines(lines => lines.Visible(false))
            .PlotBands(bands => {
        .Tooltip(tooltip => tooltip
            .Template("Maximum: #= value.target # <br /> Average: #= value.current #")

This configuration results in the Bullet Chart below.

Figure 1: A sample Bullet Chart

Bullet Chart

Target Line Customization

You can customize the line that represents the target value using the series Target configuration. It exposes three main settings - Border, Color and Line that control the line appearance. Below, you can see an example that uses all three options to customize the target line:

              .Series(series =>
                  .Bullet(new double[][] { new double[] { 780, 762.5 } })

Figure 2: A Bullet Chart with custom target line

Bullet Chart with Custom Line

See Also

Other articles on Kendo UI Charts and chart types: