renderImage

by Murali Kaliappan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 300px"></div>
<div id="containerContainer">

</div>
<input type="button" value="svg" />
<img id="scream" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0QMcWDWDKaIVwXFcPmj6b1jNBXhgNCk08veeBEXNqUhy5CO8r0w"/>

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;"></canvas>

<div id="result">

</div>

JavaScript

function getBase64Image() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
  
  var canvas = document.getElementById('myCanvas');
  
  var dataURL = canvas.toDataURL();
  console.log(dataURL);
  return dataURL;
}

getBase64Image();
var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function(chart) { // on complete
 
    chart.renderer.image(getBase64Image(), 150, 125, 30, 30)
        .add();   
    
});

$("input").click(function(){
  var highChartLength = Highcharts.charts.length;
	for(var i = 0 ;i < Highcharts.charts.length; i++ ) {
  var chart = Highcharts.charts[i];
  if(chart) {
  	var renderTo 	= chart.renderTo.id;     
    
    var svg = chart.getSVG();    
    var b64 = "data:image/svg+xml;base64,"+window.btoa(svg);
    $('#containerContainer').append(svg);
		$('#containerContainer').append("<img src='"+b64+"'/>")
    console.log(renderTo);
  }
 }  

})