Superimposed Column Chart using Error Chart (Workaround) | CanvasJS JavaScript Charts

Superimposed Column 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: "Superimposed Column Chart"
  },
  data: [
    {
      type: "column",
      color: "#fdfa99",
      fillOpacity: 0.8,
      dataPoints: [
        { x: 1, y: 71, color: "#f3a4a8" },
        { x: 2, y: 55, color: "#f3a4a8" },
        { x: 3, y: 50 },
        { x: 4, y: 65 },
        { x: 5, y: 95 },
        { x: 6, y: 68 },
        { x: 7, y: 28 },
        { x: 8, y: 34, color: "#a6e0b7" },
        { x: 9, y: 14, color: "#a6e0b7" }
      ]
    },
    {
      type: "error",
      whiskerThickness: 0,
      color: "#49b24c",      
      indexLabelFormatter: function(e){      	
        if(e.index === 1)
          return e.dataPoint.y[1];
        return "";
      },
      toolTipContent: "{x}: {y[1]}",
      dataPoints: [
        { x: 6, y: [0, 85], color: "#fbf200" },
        { x: 8, y: [0, 60] },
        { x: 9, y: [0, 40] }
      ]
    }	
  ]
});

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