Place image over CanvasJS

[john]

Hey!

I was just wondering if it is possible to place an image over CanvasJS (over a scatter graph) and make it responsive to screens?

Thank you.

[Vishwas R]

@maksim-ivanov,

Yes, you can position the image over chart and make it responsive by using convertValueToPixel method. Below is the code-snippet for the same.

$('img').attr('src', url)
	.attr("class", label)
	.css({"display": "none"})
	.appendTo($('#chartContainer>.canvasjs-chart-container'));

imageBottom = chart.axisX[0].bounds.y1;
imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[0].x);
     
image.css({"position": "absolute", "display": "block", "top": imageBottom  - fruit.height(), "left": imageCenter - fruit.width()/2 });

Please take a look at this documentation page for step-to-step tutorial on positioning image on top of chart.
Also refer to this JSFiddle for an example.

—
Vishwas R
Team CanvasJS

[john]

Thank you for your reply.

I was just wondering if it is possible to place image over the whole canvas, and not just the markers?

Thank you.
Maksim

[Vishwas R]

Maksim,

If you are trying to add background image to chart, you can add background-image to the chart-container and set chart backgroundColor to transparent. Below is the code-snippet.

<div id="chartContainer" style="height: 300px; width: 100%; background-image:url('https://canvasjs.com/wp-content/uploads/2021/03/background-image-for-chart.jpg');"></div>

Please take a look at this JSFiddle for complete code.

Or if you like to position image on-top of chart with defined width and position, you can add image and position with the help of CSS properties as shown in this tutorial.

—
Vishwas R
Team CanvasJS

[john]

Thank you for your reply.

Do you think if there is any option to create something like this: https://jsfiddle.net/5k60djuL/ , and make the apple image responsive to size, rather than fixed?

[Vishwas R]

Maksim,

Updating the width of image on resizing the window should work fine in your case. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Udhay]

Hey!

If it is possible to place an image over CanvasJS bar background with fill the bar background like dotted and dashed?

Thank you.

[Vishwas R]

@udhay,

You can position image over column with the help of convertValueToPixel method. Please take a look at this JSFiddle for an example on overlaying image over columns in column chart.

—
Vishwas R
Team CanvasJS