Как добавить аннотацию в ChartJS для отдельной метки графика?
Создаю график с помощью ChartJS + HTML, вроде со всем разобрался, но упёрся в добавление подписей (аннотаций) для отдельных меток кривой. Мне нужно, чтобы для точки с заданными координатами постоянно отображался определённый текст, просто вставить текст через дополнительный скрипт вариант не очень, там как я понял в процентном соотношении цифры указаны, а лучше было бы если бы это были такие же координаты как для точки. Помогите пожалуйста, подскажите если можете. Вот мой код
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)'
}
}]
}
}
});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%
}<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>
<div id="bod">
<p><span> </span></p>
<div id="PlotSection">
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>
<p><span> </span></p>
<div id="PeakTableSection">
<p>Таблица пиков</p>
<table class="iksweb">
<tbody>
<tr>
<td>Пик</td>
<td>
<p>Время</p>
<p>(мин)</p>
</td>
<td>Компонент</td>
<td>
<p>Конц.</p>
<p></p>
</td>
<td>Высота</td>
<td>Площадь</td>
<td>
<p>Полуширина</p>
</td>
<td>
<p>Асимметрия</p>
</td>
<td>
<p>Эффективность</p>
</td>
<td>
<p>Разрешение</p>
</td>
</tr>
<tr>
<td>1 </td>
<td>4.54</td>
<td>ретинол</td>
<td>3.440</td>
<td>35.199</td>
<td>476.097</td>
<td>11.893</td>
<td>1.53</td>
<td>2546.5</td>
<td></td>
</tr>
</tbody>
</table>
<p><span> </span></p>
<p><span> </span></p>
<p><span> </span></p>
</div>
<div id="ProgramTableSection">
<p>Программа измерений</p>
<table class="iksweb">
<tbody>
<tr>
<td> Этап </td>
<td> От </td>
<td> До </td>
<td> Компонент </td>
<td> λ погл. </td>
</tr>
<tr>
<td> 1 </td>
<td> 0.00 </td>
<td> 10.00 </td>
<td> ретинол </td>
<td> 254 </td>
</tr>
</tbody>
</table>
<p><span> </span></p>
<p><span> </span></p>
</div>
<div id="CalibrationTableSection">
<p>Таблица градуировки</p>
<table class="iksweb">
<tbody>
<tr>
<td> Номер </td>
<td> Компонент </td>
<td> Время </td>
<td> k1 </td>
<td> СКО </td>
<td> КК </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>