[Solved]-How to rotate custom marker in chart.js?-Chart.js

It looks like you will need to add in code to the drawPoint function within helpers.canvas.js. If the point is an image object, rotate the canvas as needed, draw the image, then rotate the context back to standard orientation. An example of doing this is here.

I don't know enough about the library and the toolchain to be able to write functional code, but those 2 links should get you started.

Faced same problem, if you can use SVG format. This solution will help you.

1. Get xml string of your SVG.
2. Dynamically generate it, as below code snippet.

let svg = `<?xml version="1.0" encoding="utf-8"?> <svg height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-297 389 16 16" style="enable-background:new -297 389 16 16;" xml:space="preserve" transform-origin="center" transform="rotate(${Math.floor(history.direction)})"> </svg>`; let yourImage = new Image(); let parser = new DOMParser(); yourImage.src =`data:image/svg+xml;base64,${btoa(svg)}`;

sorry for bad formatting :P.

you can modify svg as per you need, just use its attributes. such as transform=rotate(40) etc.