如何用chartjs-plugin-datalabels在折线图指定日期点显示自定义标签

要在折线图特定日期点添加自定义标签，只需修改chartjs-plugin-datalabels的配置，通过匹配坐标轴标签来控制标签的显示与内容：

核心配置修改 #

调整options.plugins.datalabels部分，添加显示判断、自定义文本和样式设置：

plugins: {
  datalabels: {
    // 仅在目标日期点显示标签
    display: function(context) {
      // 获取当前数据点对应的坐标轴标签
      const currentLabel = context.chart.data.labels[context.dataIndex];
      // 匹配目标日期，可添加多个日期用 || 连接
      return currentLabel === 'Oct-2018';
    },
    // 设置自定义标签内容
    formatter: function(value, context) {
      return 'Big Event here';
    },
    // 调整标签样式，避免与折线重叠
    align: 'top',
    offset: 10,
    color: '#DC267F',
    font: {
      weight: 'bold',
      size: 12
    }
  }
}

完整修改后的代码 #

var linuxonly = document.getElementById('linuxonly');
var Chartlinuxonly = new Chart(linuxonly, {
  type: 'line',
  plugins: [ChartDataLabels],
  data: {
    labels: ['Sep-2018','Oct-2018','Nov-2018','Dec-2018','Jan-2019','Feb-2019','Mar-2019','Apr-2019','May-2019','Jun-2019','Jul-2019','Aug-2019','Sep-2019','Oct-2019','Nov-2019','Dec-2019','Jan-2020','Feb-2020','Mar-2020','Apr-2020','May-2020','Jun-2020','Jul-2020','Aug-2020','Sep-2020','Oct-2020','Nov-2020','Dec-2020','Jan-2021','Feb-2021','Mar-2021','Apr-2021','May-2021','Jun-2021','Jul-2021','Aug-2021','Sep-2021','Oct-2021','Nov-2021','Dec-2021','Jan-2022','Feb-2022','Mar-2022','Apr-2022','May-2022','Jun-2022','Jul-2022','Aug-2022','Sep-2022','Oct-2022','Nov-2022','Dec-2022','Jan-2023','Feb-2023','Mar-2023','Apr-2023','May-2023','Jun-2023','Jul-2023','Aug-2023','Sep-2023','Oct-2023','Nov-2023','Dec-2023','Jan-2024'],
    datasets: [
      {
        label: 'Linux',
        lineTension: 0,
        fill: false,
        data: [0.78, 0.72, 0.80, 0.82, 0.82, 0.77, 0.82, 0.81, 0.84, 0.76, 0.79, 0.80, 0.83, 0.83, 0.81, 0.83, 0.90, 0.83, 0.87, 0.89, 0.91, 0.88, 0.86, 0.89, 0.94, 0.90, 0.90, 0.78, 0.91, 0.81, 0.85, 0.85, 0.86, 0.89, 1.00, 1.02, 1.05, 1.13, 1.16, 1.11, 1.06, 1.02, 1.00, 1.14, 1.12, 1.18, 1.23, 1.27, 1.23, 1.28, 1.44, 1.38, 1.38, 1.27, 0.84, 1.32, 1.47, 1.44, 1.96, 1.82, 1.63, 1.39, 1.91, 1.97, 1.95],
        backgroundColor: '#0C7BDC',
        borderColor: '#0C7BDC',
        borderWidth: 1,
        trendlineLinear: {
          style: '#DC267F',
          lineStyle: 'dotted',
          width: 2
        }
      }
    ]
  },
  options: {
    legend: {
      display: true
    },
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        },
        scaleLabel: {
          display: true,
          labelString: 'Percentage of Steam users'
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          var label = data.datasets[tooltipItem.datasetIndex].label;
          return label + ' ' + value + '%';
        }
      },
    },
    plugins: {
      datalabels: {
        display: function(context) {
          const currentLabel = context.chart.data.labels[context.dataIndex];
          // 可添加多个目标日期，比如 return currentLabel === 'Oct-2018' || currentLabel === 'Mar-2020';
          return currentLabel === 'Oct-2018';
        },
        formatter: function(value, context) {
          return 'Big Event here';
        },
        align: 'top',
        offset: 10,
        color: '#DC267F',
        font: {
          weight: 'bold',
          size: 12
        }
      }
    }
  }
});

关键说明 #

• 显示判断逻辑：通过context.chart.data.labels[context.dataIndex]获取当前点的坐标轴标签，与目标日期匹配后返回true，标签才会显示
• 多日期支持：如果需要在多个日期点显示标签，只需在display函数中用||连接多个判断条件
• 样式自定义：可根据需求调整align（对齐方式）、offset（偏移量）、color（颜色）等样式属性，让标签在图表中更清晰

内容的提问来源于stack exchange，提问作者NaughtySquid