Can I place an image over a chart at a specific position?

[AnotherTrader]

Is there a way to place an image (say a jpeg) over a chart at a specific bar and price?

[NinjaTrader_ChrisL]

Hello AnotherTrader , thanks for your question.

This is possible with the use of SharpDX in the OnRender method. You can place any bitmap image onto a chart.

We have an example that I have attached to this post. This example draws a SharpDX Bitmap onto the RenderTarget. First, the images are loaded into Bitmap objects in the UpdateImage method, then the image is drawn to the RenderTarget with the SharpDX “DrawBitmap” method. Note that RenderTarget dependent resources must be disposed and recreated when the RenderTarget changes, or with each OnRender pass. Use OnRenderTargetChange as demonstrated for better performance.
The Bitmap should be updated in OnRender, and any signals to change the Bitmap should be signaled in OnBarUpdate, and then changed in the next OnRender pass.

Please let me know if you have any questions on this material.

[AnotherTrader]

How could I set it up so that additional text appears if the user runs their mouse over the image?

[NinjaTrader_ChrisL]

Hi AnotherTrader, thanks for your reply.

I am not sure if these support tool tips, that would be a C# concept that would need to be researched more on your own.

Best regards,
-ChrisL

[iamkajal]

you can try this code to place an image over a chart at a specific position
Step 1

  	var chart = new CanvasJS.Chart("chartContainer",{ 	title :{ 	text: "Position Image over chart" 	}, 	data: [{ 	type: "column", 	dataPoints : [ 	{ label: "apple", y: 10 }, 	{ label: "orange", y: 15 }, 	{ label: "banana", y: 25 }, 	{ label: "mango", y: 30 }, 	{ label: "grape", y: 28 } 	] 	}] 	}); 	chart.render();

Step2:

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

Step3:

  	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 	});