Chart.js자체에 기능이 없기 때문에 플러그인을 추가해야 한다.

링크

chartjs-plugin-datalabels

설치

npm install chartjs-plugin-datalabels —save

import

import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

등록

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

// OR only to specific charts:
var chart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  options: {
    // ...
  }
})

설정

3레벨 단계로 설정할 수 있다.

// Change default options for ALL charts
Chart.defaults.set('plugins.datalabels', {
  color: '#FE777B'
});

var chart = new Chart(ctx, {
  options: {
    plugins: {
      // Change options for ALL labels of THIS CHART
      datalabels: {
        color: '#36A2EB'
      }
    }
  },
  data: {
    datasets: [{
      // Change options only for labels of THIS DATASET
      datalabels: {
        color: '#FFCE56'
      }
    }]
  }
});