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: "error",
      whiskerThickness: 0,
      color: "#004ca0",
      dataPoints: [
        { label: "Alpha", y: [0 , 71] },
        { label: "Beta", y: [0, 65] },
        { label: "Gamma", y: [0, 50] },
        { label: "Delta", y: [0, 55] }
      ]
    },
    {
      type: "column",
      axisXType: "secondary",
      color: "#34dc00",
      dataPoints: [
        { label: "Alpha", y: 60 },
        { label: "Beta", y: 55 },
        { label: "Gamma", y: 40 },
        { label: "Delta", y: 30 }
      ]
    },
    {
      type: "column",
      axisXType: "secondary",
      color: "#3cfa00",
      dataPoints: [
        { label: "Alpha", y: 50 },
        { label: "Beta", y: 45 },
        { label: "Gamma", y: 30 },
        { label: "Delta", y: 25 }
      ]
    },
    {
      type: "column",
      axisXType: "secondary",
      color: "#57ff23",
      dataPoints: [
        { label: "Alpha", y: 40 },
        { label: "Beta", y: 40 },
        { label: "Gamma", y: 25 },
        { label: "Delta", y: 20 }
      ]
    },
    {
      type: "column",
      axisXType: "secondary",
      color: "#7dff55",
      dataPoints: [
        { label: "Alpha", y: 30 },
        { label: "Beta", y: 35 },
        { label: "Gamma", y: 20 },
        { label: "Delta", y: 15 }
      ]
    }
  ]
});

chart.render();
chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10);