JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Resizing and Re-positioning Images on Window Resize"
},
axisX:{
interval: 1,
tickThickness: 0,
gridThickness: 0,
lineThickness: 0
},
axisY:{
gridThickness: 0,
maximum: 70000,
labelFormatter: function(e){
return " ";
},
lineThickness: 0,
tickThickness: 0
},
toolTip:{
enabled: false
},
dataPointWidth: 30,
data: [
{
type: "stackedBar",
color: "#FFF",
dataPoints: [
{ y: 6000, label: "Andrew Yang" },
{ y: 6000, label: "Cory Booker" },
{ y: 6000, label: "Amy Klobuchar" },
{ y: 6000, label: "Beto O’Rourke" },
{ y: 6000, label: "Bernie Sanders" },
{ y: 6000, label: "Kamala Harris" },
{ y: 6000, label: "Joe Biden" },
{ y: 6000, label: "Elizabeth Warren" },
{ y: 6000, label: "Pete Buttigieg" }
]
},
{
type: "stackedBar",
color: "#05ADD6",
dataPoints: [
{ y: 3651, label: "Andrew Yang", name: "ayang" },
{ y: 4287, label: "Cory Booker", name: "cbooker" },
{ y: 9007, label: "Amy Klobuchar", name: "aklobuchar" },
{ y: 9620, label: "Beto O’Rourke", name: "beto" },
{ y: 12731, label: "Bernie Sanders", name: "bsanders" },
{ y: 19286, label: "Kamala Harris", name: "kharris" },
{ y: 19946, label: "Joe Biden", name: "jbiden" },
{ y: 20620, label: "Elizabeth Warren", name: "ewarren" },
{ y: 46728, label: "Pete Buttigieg", name: "pbuttigieg" }
]
},
]
});
chart.render();
addImages(chart);
function addImages(chart) {
for(var i = 0; i < chart.data[1].dataPoints.length; i++){
var dpsName = chart.data[1].dataPoints[i].name;
var imgSrc = "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/sunny.png";
positionImage(
$("<img>")
.attr("src", imgSrc)
...