Stacked Column Chart with Rounded Corners using CSS | CanvasJS

Gradient & Pattern Filling in Column Chart using CSS Gradient & Background Image | CanvasJS

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>

CSS

.dp-dom-1 { /* .dp-dom-SERIES-INDEX */
  border-radius: 25px 25px 0 0;
}

JavaScript

var chart = new CanvasJS.Chart( "chartContainer", {
  theme: "light2",
  title : {
    text: "Stacked Column Chart with Rounded Corner"
  },
  dataPointWidth: 50,
  data: [{
    type: "stackedColumn",
    color: "#156459",
    dataPoints: [
      { x: 10, y: 171 },
      { x: 20, y: 155 },
      { x: 30, y: 150 },
      { x: 40, y: 165 },
      { x: 50, y: 195 },
      { x: 60, y: 168 },
      { x: 70, y: 128 },
      { x: 80, y: 134 },
      { x: 90, y: 114 }
    ]
  }, {
    type: "stackedColumn",
    color: "transparent",
    dataPointBackground: "#e8e8e8",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});

chart.render();
customizeDataPointLook(chart);


function createElement(type, parent, className, style) {
  var element = document.createElement(type);
  element.setAttribute("class", className);
  element.setAttribute("style", style || "");
  if(parent)
    parent.appendChild(element);
  return element;
}

function customizeDataPointLook(chart) {
  chart.options.dpsDOM = [];
  var dpDOM, dsDOM, dpsWidth, i, j, xVal, yVal, diff;
  chart.options.dataContainer = createElement("div", null, "chart-dps-container", "position: absolute; display: block; pointer-events: none; width: " + chart.width + "px; height: " + chart.height + "px;");

  chart.canvas.parentNode.insertBefore(chart.options.dataContainer, chart.canvas.nextSibling);

  for(i = 0; i < chart.data.length; i++) {
    dsDOM = createElement("div", chart.options.dataContainer, "ds-dom-" + i);
    chart.options.dpsDOM[i] = [];
    for(j = 0; j < chart.data[i].dataPoints.length; j++) {
      dpDOM = createElement("div", dsDOM, "dp-dom-" + i, "position: absolute;");
      chart.options.dpsDOM[i].push(dpDOM);
      positionDP(dpDOM, chart, i, j);
    }
  }
}

function positionDP(dpDOM, chart, i, j) {
  xVal =...