[Vue.js] Chart.js Doughnut Chart labels outside with line

vue-chartjs와 chart.js를 이용하여 그린 도넛 차트 바깥에 선과 함께 값을 그려보겠습니다.

(vue 2 버전, chart.js: 3.5.0, vue-chartjs: 3.5.1 버전 사용)

 

---

 

1. 도넛 차트 그리기

https://nm-it-diary.tistory.com/88

[Vue.js] Chart.js Doughnut Chart 그리기

 

 

2. labels 바깥에 넣는 코드

 

2-1. DoughnutChart.vue

 .
 .
 .
 options: {
 .
 .
  center: {
     id: "pie",
     labels: true
  }
  .
  .
 }
 .
 .
 .

- options 객체 안에 center 객체를 생성했습니다.

- 파이(도넛) 차트에서만 사용하기 위해 id를 pie로 주었고, labels를 보이게 하기 위해 true를 주었습니다.

 

 

2-2. global.js

import { Chart, registerables } from "chart.js";

const DoughnutLabelPlugin = {
  id: "label-outside-plugin",
  afterDraw: chart => {
    if (chart.config._config.options?.center?.id === "pie" 
        && chart.config._config.options?.center?.labels) {
        
      const ctx = chart.ctx;
      ctx.font = "14px 'SCDream-light'";
      ctx.save();
      
      const chartCenterPoint = {
        x: (chart.chartArea.right - chart.chartArea.left) / 2 + chart.chartArea.left,
        y: (chart.chartArea.bottom - chart.chartArea.top) / 2 + chart.chartArea.top
      };
      
      chart.config.data.labels.forEach((label, i) => {
        const meta = chart.getDatasetMeta(0);
        const arc = meta.data[i];
        const dataset = chart.config.data.datasets[0];

        const centerPoint = arc.getCenterPoint();
        const model = arc;
        let color = chart.config._config.data.datasets[0].backgroundColor[i];
        let labelColor = "#323232";
        
        if (dataset.polyline && dataset.polyline.color) {
          color = dataset.polyline.color;
        }

        if (dataset.polyline && dataset.polyline.labelColor) {
          labelColor = dataset.polyline.labelColor;
        }

        let angle = Math.atan2(centerPoint.y - chartCenterPoint.y, centerPoint.x - chartCenterPoint.x);

        let plusRadius = 10;
        const point2X = chartCenterPoint.x + Math.cos(angle) * (model.outerRadius + plusRadius);
        let point2Y = chartCenterPoint.y + Math.sin(angle) * (model.outerRadius + plusRadius);

        let value = dataset.data[i];
        if (dataset.polyline && dataset.polyline.formatter) {
          value = dataset.polyline.formatter(value);
        }

        //DRAW CODE
        if (value !== 0) {
          ctx.strokeStyle = color;
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.moveTo(centerPoint.x, centerPoint.y);
          ctx.lineTo(point2X, point2Y);
          ctx.stroke();
        }
        
        const labelAlignStyle = point2X < chartCenterPoint.x ? "right" : "left";
        const labelX = point2X < chartCenterPoint.x ? point2X : point2X + 2;
        const labelY = point2Y < chartCenterPoint.y ? point2Y : point2Y + 5;
        
        ctx.textAlign = labelAlignStyle;
        ctx.textBaseline = "bottom";

        ctx.fillStyle = labelColor;
        if (value !== 0) {
          ctx.fillText(value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","), labelX, labelY);
        }
      });
      
      ctx.restore();
    }
  }
};

Chart.register({ DoughnutLabelPlugin });
Chart.register(...registerables);

- 도넛 차트 바깥에 선과 함께 값이 그려질 수 있는 플러그인을 만들었습니다.

- 값이 0이거나 없으면 표시되지 않도록 처리했습니다.

- 선의 색상은 차트의 배경색과 같도록 background 배열을 가져와서 사용했습니다.

 

- value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 부분은 숫자에 콤마(,)를 표시하기 위한 처리입니다.

 

 

3. 결과 화면

도넛차트 labels outside

 

 

 

이상으로 Chart.js 도넛 차트 값을 바깥에 넣는 코드를 알아보았습니다.

 

---