[Vue.js] Char.js 라벨 값(value) 표시하기

Chart.js 플러그인에 옵션과 다양한 기능을 전부 다 알고 사용하긴 어려우니

필요할때마다 찾아보게 된다.

그런데 생각보다 버전별로 적용하는 것도 달라서 라벨 값 표시하는데 애를 좀 먹었다.

내가 사용한 chart.js 버전은 다음과 같다

chart.js : 2.9.4
chartjs-plugin-datalabels : 0.7.0
vue-chartjs : 3.5.1

나는 chart.js 2.x 를 사용해서 datalabels 를 2.x 를 설치했을때도 동작을 하지 않앗고, 1.x로 내렸을때도 동작하지 않았다.
찾고 찾아서 0.7.0 버전을 설치해서야 라벨 값을 표시 할 수 있었다.
만약 chart.js 3.x 를 사용한다면 datalables 는 2.x 이상 필요하며 자세한 내용은 아래 공식문서에서 확인 할 수 있다.

chartjs-plugin-datalabels Getting Started

데이터라벨 값을 표시하지 않으면,
정확한 수치를 확인하기위해 하나하나 마우스를 올려야하는 불편함이 있다.

이를 개선하기위해 chartjs-plugin-datalabels 를 설치하고 플러그인을 명시해준다.

import { HorizontalBar } from "vue-chartjs";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";
export default {
  extends: HorizontalBar,
  plugins: [ChartJSPluginDatalabels],
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.renderChart(
        {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              labels: "Data One",
              backgroundColor: "#5E83BA",
              data: [40, 800, 10, 5000, 39, 7800, 7000],
              // *** datalabel option 지정 
              datalabels: {
                display: true, // default는 true, false 로 하면 값을 숨길 수 있다.
                align: "right",
                anchor: "end",
                color: "#898989",
                borderWidth: 2,
                padding: {
                  bottom: 0,
                  left: 20,
                },
              },
            },
          ],
        },
        {
          responsive: true,
          maintainAspectRatio: false,
          tooltips: {     
            mode: "index",     // 라벨 mouseover시 tooltips 보이기
            intersect: false,
          },
          legend: {
            display: false,  // 범례 숨기기
          },
        }
      );
    },
  },
};

이제 데이터 값을 한눈에 볼 수 있다.