title: Align a data label below a point on a bubble graph (Chart.JS)
body: <p>I am trying to position a label related to the dataset below a point on a bubble graph and to have the value displayed on top of the point.</p>
  
  <p>I have tried returning two different values, but it only allows me to return one.</p>
  
  <p>Because of this I have returned both values within the same string.</p>
  
  <p>Is it possible to return the label and position it below the value of the dataset and to put the value above the point of the dataset?</p>
  
  <p>If it isn't possible would it be possible to somehow get the text to align to the center after the line break I have added to the string?</p>
  
  <p><a href="https://i.stack.imgur.com/EU0o6.png" rel="nofollow noreferrer">Here is what I have so far</a></p>
  
  <p><a href="https://i.stack.imgur.com/IF9Rs.png" rel="nofollow noreferrer">This is what I am trying to achieve, but with the value above the bubble</a></p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>var ctx = document.getElementById('myChart').getContext('2d');
  
  var myChart = new Chart(ctx, {
  
      type: 'bubble',
  
      data: {
          datasets: [
              {
                  label: 'Top',
                  data: [
                      {x: 110, y: 0, r: 12, name: "Performance"}
                  ],
                  backgroundColor: "rgba(255,255,255,1)",
                  borderColor: "rgba(91,182,209,1)",
                  borderWidth: 2,
                  hoverBackgroundColor: "rgba(255,255,255,1)",
                  hoverBorderWidth : 2
              },
              {
                  label: 'Average',
                  data: [
                      {x: 75, y: 0, r: 12, name: "Performance"}
                  ],
                  backgroundColor: "rgba(255,255,255,1)",
                  borderColor: "rgba(91,182,209,1)",
                  borderWidth: 2,
                  hoverBackgroundColor: "rgba(255,255,255,1)",
                  hoverBorderWidth : 2
              },
              {
                  label: 'You 2017',
                  data: [
                      {x: 55, y: 0, r: 15, name: "Performance"}
                  ],
                  backgroundColor: "rgba(255,255,255,1)",
                  borderColor: "rgba(91,182,209,1)",
                  borderWidth: 2,
                  hoverBackgroundColor : "rgba(255,255,255,1)",
                  hoverBorderWidth : 2
              },
              {
                  label: 'You 2018',
                  data: [
                      {x: 90, y: 0, r: 15, name: "Performance"} // The labe needs to be
                  ],
                  backgroundColor: "rgba(255,255,255,1)",
                  borderColor: "rgba(91,182,209,1)",
                  borderWidth: 2,
                  hoverBackgroundColor : "rgba(255,255,255,1)",
                  hoverBorderWidth : 2
              }
          ]
      },
      options: {
          legend: {
              display: false
          },
          plugins: {
              datalabels: {
                  anchor: function (context) {
                      var value = context.dataset.data[context.dataIndex];
                      return value.x &lt; 1000 ? 'end' : 'center';
                  },
                  align: function (context) {
                      var value = context.dataset.data[context.dataIndex];
                      return value.x &lt; 1000 ? 'end' : 'center';
                  },
                  color: function (context) {
                      var value = context.dataset.data[context.dataIndex];
                      return value.x &lt; 1000 ? context.dataset.borderColor : 'white';
                  },
                  font: {
                      weight: 'bold'
                  },
                  formatter: function (value, context) {
                      ctx.textAlign = "center";
                      return context.dataset.label + "\n" + Math.round(value.x);
                  },
                  offset: 2,
                  padding: 0
              }
          },
          maintainAspectRatio: false,
          scales: {
              yAxes: [{
                  id: 'first-y-axis',
                  type: 'linear',
                  ticks: {
                      min: 0,
                      max: 1,
                      stepSize: 1,
                      display: false
                  },
                  gridLines: {
                      display: false,
                      drawBorder: false
                  }
              }],
              xAxes: [
                  {
                      id: 'first-x-axis',
                      ticks: {
                          min: 50, // Controls where axis starts
                          max: 120, // Controls where axis finishes
                          stepSize: 70 // Control the gap between the first x-axis value and the last x-axis value
                      },
                      gridLines: {
                          display: false,
                          lineWidth: 3 // Width of bottom line
                      }
                  }
              ]
  
          }
      }
  
  });
  </code></pre>
  
  <p>Any help or suggestions would be greatly appreciated ^_^</p>