tengo estos datos
chartLabels = ['2018', '2019', '2020', 'TTM',] priceToSaleRatioData = [3.37, 5.73, 1.88, 4.6,]Quiero que esto se muestre sobre cada viñeta en mi gráfico de líneas, pero debería estar escrito de forma permanente en algún cuadro.
Aquí está mi jsfiddle con el código que obtuve hasta ahora.
Puede usar el chartjs-plugin-datalabels .
Primero deberá registrar el complemento, luego puede definir las opciones deseadas dentro de options.plugins.datalabels .
Si además del valor, también desea mostrar la etiqueta correspondiente o algún texto adicional, debe definir una función de
formatter.
Eche un vistazo al código ejecutable a continuación y vea cómo funciona.
const chartLabels = ['2018', '2019', '2020', 'TTM']; const priceToSaleRatioData = [3.37, 5.73, 1.88, 4.6]; Chart.register(ChartDataLabels); new Chart('chart', { type: 'line', data: { labels: chartLabels, datasets: [{ label: 'My Dataset', data: priceToSaleRatioData, }] }, options: { plugins: { datalabels: { color: 'blue', anchor: 'end', align: 'top', formatter: (v, ctx) => { let label = ctx.chart.data.labels[ctx.dataIndex]; if (label != 'TTM') { label = 'year ' + label; } return label + ': ' + v; } } }, scales: { y: { max: 8 }, x: { offset: true } } } }); datalabels: { formatter: function(value, context) { return context.chart.data.labels[context.dataIndex]; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script> <canvas id="chart" height="100"></canvas>