CanvasJS Bullet Chart using Stacked Bar 100% Chart

CanvasJS Bullet Chart using Stacked Bar 100% Chart

by Vishwas .R

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="bulletChartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var bulletChartData = [
  { label: "Metric 1", target: 80, actual: 65 },
  { label: "Metric 2", target: 75, actual: 72 },
  { label: "Metric 3", target: 90, actual: 85 }
];

var bulletChart = new CanvasJS.Chart("bulletChartContainer", {
  animationEnabled: true,
  theme: "light2",
  title: {
    text: "Bullet Chart"
  },
  toolTip: {
  	shared: true
  },
  data: [
    {
      type: "stackedBar100",
      name: "Target",
      showInLegend: true,
      color: "#7f7f7f",
      dataPoints: bulletChartData.map(item => ({ label: item.label, y: item.target }))
    }, {
      type: "stackedBar100",
      name: "Difference",
      color: "#afabab",
      toolTipContent: null,
      dataPoints: bulletChartData.map(item => ({ label: item.label, y: item.target - item.actual }))
    }, {
      type: "bar",
      toolTipContent: null,
      dataPoints:[{}]
    }, {
      type: "bar",
      name: "Actual",
      color: "#000",
      showInLegend: true,
      dataPoints: bulletChartData.map(item => ({ label: item.label, y: item.actual }))
    }, {
      type: "bar",
      toolTipContent: null,
      dataPoints:[{}]
    }
  ]
});

bulletChart.render();