Position Image on top of Title - CanvasJS JavaScript Charts
Position Image on top of Title - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%; position: relative;"></div>
<img src="http://i.imgur.com/sx4404I.png" id="title" style="position: absolute;">
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "`",
fontSize: 40
},
data: [
{
type: "column",
dataPoints: [
{ label: "apple", y: 18 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
var title = document.getElementById("title");
title.width = (chart.bounds.x2 - chart.bounds.x1)/2;
title.style.top = chart.title.bounds.y1 + "px";
title.style.left = (chart.bounds.x2 - chart.bounds.x1)/2 - title.width/2 + "px";