title: How to add annotation in ChartJS for individual chart label?
body: <p>I create a chart using ChartJS + HTML, I sort of figured it out, but I ran into adding labels (annotations) for individual curve labels. I need a certain text to be constantly displayed for a point with given coordinates, just inserting text through an additional script is not a very good option, as I understand it, the numbers are indicated in percentage terms, but it would be better if they were the same coordinates as for the point. Please help, tell me if you can. Here is my code</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>var xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  var yValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  
  new Chart("myChart", {
    type: "line",
    data: {
      labels: xValues,
      datasets: [{
  
        borderWidth: 1,
        fill: false,
        pointRadius: 0,
        lineTension: 0,
        backgroundColor: "rgba(200,100,55,1.0)",
        borderColor: "rgba(0,0,255,1.0)",
        data: yValues
      }]
    },
    options: {
      plugins: {
        autocolors: false,
        annotation: {
          annotations: {
            label1: {
              type: 'label',
              xValue: 2.5,
              yValue: 60,
              backgroundColor: 'rgba(245,245,245)',
              content: ['This is my text', 'This is my text, second line'],
              font: {
                size: 18
              }
            }
          }
        }
      },
      pan: {
        enabled: true,
        mode: 'xy'
      },
      zoom: {
        enabled: true,
        mode: 'xy'
      },
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Оптическая плотность (mAU)',
            fontStyle: 'Arial',
            fontSize: 12,
            fontColor: '#000000',
          },
          ticks: {
            min: -60.0,
            max: 60.0,
            stepSize: 20.0
          },
          gridLines: {
            drawOnChartArea: false,
            color: 'rgba(10,0,0,0.5)'
          }
        }],
  
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Время измерения (мин.)',
            fontStyle: 'Arial',
            fontSize: 12,
            fontColor: '#000000',
          },
          ticks: {
            min: 0.0,
            max: 10.0,
            maxTicksLimit: 20
          },
          gridLines: {
            drawOnChartArea: false,
            color: 'rgba(10,0,0,0.5)'
          }
        }]
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table.iksweb {
    width: 20%;
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
  }
  
  h4 {
    text-align: center;
  }
  
  table.iksweb,
  table.iksweb td,
  table.iksweb th {
    border: 1px solid #595959;
  }
  
  table.iksweb td,
  table.iksweb th {
    padding: 3px;
    width: 30px;
    height: 35px;
  }
  
  table.iksweb th {
    background: #347c99;
    color: #fff;
    font-weight: normal;
    word-break: break-all;
    /* Перенос слов */
  }
  
  body {
    font-family: Calibri;
    font-size: 12pt;
  }
  
  span {
    font-family: 'Arial CYR';
    -aw-import: ignore;
    font-style: italic;
  }
  
  p,
  td {
    margin: 0pt;
    widows: 0;
    orphans: 0;
    font-size: 10pt;
    font-family: 'Arial CYR';
    font-style: normal;
  }
  
  table {
    margin-top: 0pt;
    margin-bottom: 0pt;
  }
  
  .inOneLine {
    max-width: 90%;
    height: auto;
    overflow: hidden
  }
  
  .lineElementLeft {
    float: left;
    width: 23%
  }
  
  .lineElementRight {
    float: left;
    width: 50%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"&gt;&lt;/script&gt;
  &lt;div id="bod"&gt;
    &lt;p&gt;&lt;span&gt;&amp;#xa0;&lt;/span&gt;&lt;/p&gt;
    &lt;div id="PlotSection"&gt;
      &lt;canvas id="myChart" style="width:100%;max-width:700px"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;span&gt;&amp;#xa0;&lt;/span&gt;&lt;/p&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>