JSFiddle - React, Tailwind, and code Playground

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 errorDps = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Column Chart with Borders"
  },
  data: [
    {
      type: "error",
      whiskerThickness: 0,
      highlightEnabled: false,
      toolTipContent: null,
      color: "black",      
      dataPoints: errorDps 
    },
    {
      type: "column",
      dataPoints: [
        { x: 1, y: 71 },
        { x: 2, y: 55 },
        { x: 3, y: 50 },
        { x: 4, y: 65 },
        { x: 5, y: 95 },
      ]
    }
  ]
});

chart.render();

addBorder();

function addBorder() {
  for(var i = 0; i < chart.options.data[1].dataPoints.length; i++) {
    errorDps.push({
      x: chart.options.data[1].dataPoints[i].x,
      y: [0, chart.options.data[1].dataPoints[i].y + 2]
    })
  }
  chart.data[0].set("stemThickness", chart.get("dataPointWidth") + 2);
}

window.onresize = function() {
	chart.data[0].set("stemThickness", chart.get("dataPointWidth") + 2);
}