Bullet Chart using Error Chart (Workaround) | CanvasJS JavaScript Charts

Bullet Chart using Error Chart (Workaround) | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	title: {
  	text: "Chart Title"
  },
  data: [
    {
      type: "column",
      name: "Plan",
      showInLegend: true,
      color: "#c9c9c9",
      dataPoints: [
        { label: "Jan", y: 71 },
        { label: "Feb", y: 55 },
        { label: "Mar", y: 50 }
      ]
    },
    {
      type: "error",
      name: "Actual",
      showInLegend: true,
      whiskerThickness: 0,
      color: "#f1975a",
      dataPoints: [
        { label: "Jan", y: [0, 60] },
        { label: "Feb", y: [0, 60] },
        { label: "Mar", y: [0, 40] }
      ]
    }	
  ]
});

chart.render();
chart.data[1].set("stemThickness", chart.get("dataPointWidth") / 4);