title: How to rotate datalabels in Charts.js with plugins?
body: <p>I'm trying to plot the wind speed in a canvas graph using Charts.js. The data (wind speed and wind direction) comes from a JSON URL. Everything works fine with the code and the plot looks like this:</p>
  <p><a href="https://i.stack.imgur.com/uVS14.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVS14.png" alt="enter image description here" /></a></p>
  <p>I was able to add the arrows by using the Plugins from Charts.js, a <code>formatter</code> and a <code>rotation</code> function, but what I would like to do is to have the arrows rotated according to the wind direction angle that comes from the JSON.</p>
  <p>The JSON file has a format that looks like this:</p>
  <p><a href="https://i.stack.imgur.com/AzIpY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AzIpY.png" alt="enter image description here" /></a></p>
  <p>So far, a part of the code looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Current = Date.now();
  $.getJSON("https://api.openweathermap.org/data/2.5/onecall?lat={LAT}&amp;lon={LONG}&amp;dt=" + Current + "&amp;appid={MY API CODE}", function(data) {
        $.each(data.hourly, function(key, value) {
          var d = new Date(value.dt * 1000);
          minutes = "0" + d.getMinutes()
          var date_corrected = d.getFullYear() + "-" + [d.getMonth() + 1] + '-' + d.getDate() + ' ' + [d.getHours()] + ':' + minutes.substr(-2);
          dataOpen1.push({
            x: date_corrected,
            y: value.wind_speed
          });
          dataOpen2.push({
            x: date_corrected,
            y: value.wind_deg
          });
  
        });
        var WIND = new Chart(vant, {
            plugins: [ChartDataLabels],
            type: 'line',
            data: {
              labels: dataOpen1.map(x =&gt; x.x),
              datasets: [{
                data: dataOpen1.map(y =&gt; y.y),
                label: 'Viteza vantului ',
                borderColor: "#3e95cd",
                fill: true
              }, ]
            },
            options: {
              plugins: {
                datalabels: {
                  backgroundColor: 'white',
                  borderRadius: 20,
                  borderWidth: 3,
                  borderDashOffset: 20,
                  color: 'black',
                  font: {
                    size: 18
                  },
                  formatter: function(value) {
                    return '\u27a3'
                  },
                  rotation: function(ctx) {
                    return ctx.dataset.data[ctx.dataIndex] * 25;
                  },
                  padding: 0
                }
              },
            });
        });</code></pre>
  </div>
  </div>
  </p>
  <p>So I would like to get the values from <code>dataOpen2</code> (with the wind direction) and use it to set the rotation angle of the arrows per each data set. I know that the code has to be here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>rotation:
    function(ctx) {
  .......
      return ctx.dataset.data[ctx.dataIndex] * 25;
    },</code></pre>
  </div>
  </div>
  </p>
  <p>But I don't really have any idea how to do it.</p>