Open in:

Bullet Chart

Bullet chart is just a simple serial chart with one category value only. As it is made of serial chart, it can be both horizontal and vertical. The upper chart is made out of 5 column graphs which form the background, another black column graph which shows the value reached and a step line graph showing the dash, which sometimes indicates goal or a maximum value reached. The lower graph, instead of 5 column graphs uses one column graph filled with gradient.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}					
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv1", {
  "type": "serial",
  "theme": "none",
  "autoMargins": false,
  "marginTop": 30,
  "marginLeft": 80,
  "marginBottom": 30,
  "marginRight": 50,
  "dataProvider": [ {
    "category": "Evaluation",
    "excelent": 20,
    "good": 20,
    "average": 20,
    "poor": 20,
    "bad": 20,
    "limit": 78,
    "full": 100,
    "bullet": 65
  } ],
  "valueAxes": [ {
    "maximum": 100,
    "stackType": "regular",
    "gridAlpha": 0
  } ],
  "startDuration": 1,
  "graphs": [ {
    "fillAlphas": 0.8,
    "lineColor": "#19d228",
    "showBalloon": false,
    "type": "column",
    "valueField": "excelent"
  }, {
    "fillAlphas": 0.8,
    "lineColor": "#b4dd1e",
    "showBalloon": false,
    "type": "column",
    "valueField": "good"
  }, {
    "fillAlphas": 0.8,
    "lineColor": "#f4fb16",
    "showBalloon": false,
    "type": "column",
    "valueField": "average"
  }, {
    "fillAlphas": 0.8,
    "lineColor": "#f6d32b",
    "showBalloon": false,
    "type": "column",
    "valueField": "poor"
  }, {
    "fillAlphas": 0.8,
    "lineColor": "#fb7116",
    "showBalloon": false,
    "type": "column",
    "valueField": "bad"
  }, {
    "clustered": false,
    "columnWidth": 0.3,
    "fillAlphas": 1,
    "lineColor": "#000000",
    "stackable": false,
    "type": "column",
    "valueField": "bullet"
  }, {
    "columnWidth": 0.5,
    "lineColor": "#000000",
    "lineThickness": 3,
    "noStepRisers": true,
    "stackable": false,
    "type": "step",
    "valueField": "limit"
  } ],
  "rotate": true,
  "columnWidth": 1,
  "categoryField": "category",
  "categoryAxis": {
    "gridAlpha": 0,
    "position": "left"
  }
} );


var chart = AmCharts.makeChart( "chartdiv2", {
  "type": "serial",
  "rotate": true,
  "theme": "none",
  "autoMargins": false,
  "marginTop": 30,
  "marginLeft": 80,
  "marginBottom": 30,
  "marginRight": 50,
  "dataProvider": [ {
    "category": "Evaluation",
    "excelent": 20,
    "good": 20,
    "average": 20,
    "poor": 20,
    "bad": 20,
    "limit": 78,
    "full": 100,
    "bullet": 65
  } ],
  "valueAxes": [ {
    "maximum": 100,
    "stackType": "regular",
    "gridAlpha": 0
  } ],
  "startDuration": 1,
  "graphs": [ {
    "valueField": "full",
    "showBalloon": false,
    "type": "column",
    "lineAlpha": 0,
    "fillAlphas": 0.8,
    "fillColors": [ "#19d228", "#f6d32b", "#fb2316" ],
    "gradientOrientation": "horizontal",
  }, {
    "clustered": false,
    "columnWidth": 0.3,
    "fillAlphas": 1,
    "lineColor": "#000000",
    "stackable": false,
    "type": "column",
    "valueField": "bullet"
  }, {
    "columnWidth": 0.5,
    "lineColor": "#000000",
    "lineThickness": 3,
    "noStepRisers": true,
    "stackable": false,
    "type": "step",
    "valueField": "limit"
  } ],
  "columnWidth": 1,
  "categoryField": "category",
  "categoryAxis": {
    "gridAlpha": 0,
    "position": "left"
  }
} );
</script>

<!-- HTML -->
<div class="chart-block">
   <div id="chartdiv1" style="width:100%; height:220px;"></div>
   <div id="chartdiv2" style="width:100%; height:220px;"></div>
</div>