chart.js 파이그래프 센터 라벨

chart.js v3 에 대응 하는 라벨 센터 배치 라이브러리를 못찾아서
만들어 놓았으나 브라우저 호환성으로 인해 v2로 변경하게 되고
개선의 이유가 없어져서 기존에 찾았던 라이브러리를 사용하였다.

var labelCenter = {
  id: 'labelCenter',
  beforeDraw: function (chart, args, options) {
    if (!Array.isArray(options.labels)) {
      return console.error('"options.lables" must be array', options.lables);
    }
    if(options.display === false){
      return;
    }

    var ctx = chart.ctx;
    var width = chart.chartArea.width;
    var height = chart.chartArea.height;

    var context = ctx.canvas.getContext('2d');
    context.save();

    var labels = options.labels.slice();
    var totalFontSize = labels.reduce(function(x, y, index) {
      var prevSize = x[index-1] || 0;
      x.push(prevSize + y.font.size);
      return x;
    }, []);

    labels.forEach(function(label, index) {
      var textPosition = totalFontSize[index] - label.font.size ;
      var values = {
        text: label.text || '?',
        font:{
          size: label.font.size || 30,
          family: label.font.family || 'sans-serif',
          color: label.font.color || 'black',
          style: label.font.style || 'normal',
          unit: label.font.unit || 'px',
        }
      };
      switch (values.font.unit) {
        case 'em':
          values.font.size = label.font.size * 0.05;
          textPosition = totalFontSize[index] - label.font.size * 1.3;
          break;
      }

      context.font = values.font.style+' '+values.font.size+' '+values.font.unit+' '+values.font.family;
      context.textAlign = 'center';
      context.fillStyle = values.font.color;

      if(label.font.position){
        textPosition = label.font.position;
      }
      context.fillText(
        values.text,
        width / 2,
        (height / 2) + textPosition
      );
    });
    context.restore();
  }
};