Overlay Column with Images in Column Chart | CanvasJS JavaScript Charts

Overlay Column with Images in Column Chart | CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var imageArray = [];
var chart = new CanvasJS.Chart( "chartContainer", {
  title :{
    text: "Overlay Column with Images"
  },
  data: [{
    type: "column",
    dataPoints: [
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 4 },
      { x: 4, y: 10 },
      { x: 5, y: 3 }
    ]
  }]
});

chart.render();
addImages();

function addImages() {
  var image = "";
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
    image = document.createElement("img");
    image.setAttribute("src", "https://images.unsplash.com/photo-1557682257-2f9c37a3a5f3");
    image.setAttribute("id", chart.options.data[0].dataPoints[i].x);
    image.style.position = "absolute";
    image.style.display = "block";
    image.style.pointerEvents = "none";
    document.getElementById("chartContainer").appendChild(image);
    imageArray.push(image);

    positionImage(imageArray[i], i);
  }
}

function positionImage(image, index) {
  var yValue = chart.axisX[0].bounds.y1;
  var xValue = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  image.style.display = "block";
  image.setAttribute("width", chart.dataPointWidth);
  image.setAttribute("height", (yValue - chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y)));

  image.style.top = yValue - (yValue - chart.axisY[0].convertValueToPixel((chart.options.data[0].dataPoints[index].y)/2)) - (image.getAttribute("height")/2) + document.getElementById("chartContainer").offsetTop + "px";

  image.style.left = xValue - (image.getAttribute("width")/2) + document.getElementById("chartContainer").offsetLeft + "px";
}

window.addEventListener("resize", function() {
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
    positionImage(imageArray[i], i);
  }
});