title: ChartJs - chartjs-plugin-datalabels How to make datalabels outside of the line
body: <p>i create radar chart using <code>chartJ</code>s and use <code>chartJs-plugin-datalabels</code> for my charts.</p>
  
  <p>until now, i create the chart like this
  <a href="https://i.stack.imgur.com/gyj12.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gyj12.png" alt="myRadarChart"></a></p>
  
  <p>but i need to draw the labels like this</p>
  
  <p><a href="https://i.stack.imgur.com/BdXdU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BdXdU.png" alt="expectationChart"></a></p>
  
  <p>so far i do this to my option in chart, i set the anchor to 'end' but its doesnt work.</p>
  
  <pre><code> options: {
             plugins: {
               datalabels: {
                  color: 'white',
                  backgroundColor: function(context){
                        if(context.dataset.data[context.dataIndex] &lt;= 20){
                                      return 'red'
                        } else if (context.dataset.data[context.dataIndex] &lt;= 30){
                                      return 'orange'
                        } else if (context.dataset.data[context.dataIndex] &lt;= 40){
                                      return 'purple'
                        }
                          else if (context.dataset.data[context.dataIndex] &lt;= 40){
                                      return 'lightblue'
                        } else {
                                      return 'green'
                        }
                  },
                  borderRadius: 5,
                  padding : 5,
                  anchor: 'end',
             }
         },
    }
  </code></pre>