2

I have this problem - I want my chart to have custom markers (points) that rotate depending on the value from the dataset. I have my custom markers (arrows), but I don't know how to rotate them. I am using Chart.js

My JS Code:

    var canvas = document.getElementById('myChart');
    var ctx = canvas.getContext('2d');

    var yourImage = new Image(30, 30);
    yourImage.src = 'arrow.png';
    var myChart = new Chart(canvas, {
      type: 'scatter',
      data: {
       datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: 1,
            y: 1.45
            }, {
            x: 2,
            y: 0.25
            }, {
            x: 3,
            y: 2.56
            }, {
            x: 4,
            y: 1.65
           }],
           pointStyle: yourImage,
       }]
    },
    options: {
    scales: {
           xAxes: [{
               type: 'linear',
               position: 'bottom'
           }]
          }
       }
    });
SadFrodo
  • 315
  • 1
  • 3
  • 8

2 Answers2

0

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.

MEngelby777
  • 21
  • 3
0

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.

vivek kumar
  • 5
  • 3