Position Images over Labels - CanvasJS JavaScript Charts

Position Images over Labels - 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 CustomChart("chartContainer", {
	title: {
  	text: "Images as labels"
  },
	axisX:{
  	labelImgHeight: 75,
    labelImgWidth: 100,
  },
  data: [{
    type: "column",
    dataPoints: [{
      y: 20,
      label: {
        imageUrl: 'http://img.youtube.com/vi/TamUy_PZzBM/0.jpg'
      }
    }, {
      y: 55,
      label: {
        imageUrl: 'http://img.youtube.com/vi/dKrVegVI0Us/0.jpg'
      }
    }, {
      y: 40,
      label: {
        imageUrl: 'http://img.youtube.com/vi/QgxvDORKzec/0.jpg'
      }
    }, {
      y: 75,
      label: {
        imageUrl: 'http://img.youtube.com/vi/bvC_0foemLY/0.jpg'
      }
    }, {
      y: 30,
      label: {
        imageUrl: 'http://img.youtube.com/vi/xe1LrMqURuw/0.jpg'
      }
    }]
  }]
});

chart.render();




function CustomChart(chartContainer, options) {
  if (!options.axisX)
    options.axisX = {};
  options.axisX.labelAutoFit = false;
  options.axisX.margin = options.axisX.labelImgHeight + (options.axisX.margin ? options.axisX.margin : 0);
  if(!options.toolTip)
  	options.toolTip = { content: "{x}: {y}"};
  this.chart = new CanvasJS.Chart(chartContainer, options);


  this.render = function() {
  	if(options.axisX.labelFormatter)
    	options.axisX.userSetLabelFormatter = options.axisX.labelFormatter;
    options.axisX.labelFormatter = setImageAsLabel;
    this.chart.render();

    var yPosition = this.chart.axisY[0].bounds.y2 + this.chart.axisY[0].tickLength + 2;
    var dataPoints = this.chart.data[0].dataPoints;
    var axisX = this.chart.axisX[0];
    var imageWidth = options.axisX.labelImgWidth || (axisX.convertValueToPixel(this.chart.axisX[0].interval) - axisX.convertValueToPixel(0) - 8);    
    for (var i = 0; i < dataPoints.length; i++) 
      if (typeof dataPoints[i].label.value !== "undefined")
        dataPoints[i].label.position = axisX.convertValueToPixel(dataPoints[i].label.value);


    this.chart.render();
  	if(options.axisX.userSetLabelFormatter)
    	options.axisX.labelFormatter =...