chartjs-plugin-labels란? #

chartjs-plugin-labels는 chartjs와 함께 사용되는 라이브러리로 Pie, Doughnut, Polar area 차트 안쪽에 label을 넣을 수 있도록 기능을 제공해준다.

설치 #

CDN link

https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js

bower download

bower install chartjs-plugin-labels

node download

npm install chartjs-plugin-labels

사용법 #

new Chart(ctx, {
  type: type,
  data: data,
  options: {
    pieceLabel: {
      // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
      render: 'value',

      // precision for percentage, default is 0
      precision: 0,

      // identifies whether or not labels of value 0 are displayed, default is false
      showZero: true,

      // font size, default is defaultFontSize
      fontSize: 12,

      // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
      fontColor: '#fff',

      // font style, default is defaultFontStyle
      fontStyle: 'normal',

      // font family, default is defaultFontFamily
      fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

      // draw text shadows under labels, default is false
      textShadow: true,

      // text shadow intensity, default is 6
      shadowBlur: 10,

      // text shadow X offset, default is 3
      shadowOffsetX: -5,

      // text shadow Y offset, default is 3
      shadowOffsetY: 5,

      // text shadow color, default is 'rgba(0,0,0,0.3)'
      shadowColor: 'rgba(255,0,0,0.75)',

      // draw label in arc, default is false
      arc: true,

      // position to draw label, available value is 'default', 'border' and 'outside'
      // default is 'default'
      position: 'default',

      // draw label even it's overlap, default is false
      overlap: true,

      // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
      showActualPercentages: true,

      // set images when `render` is 'image'
      images: [
        {
          src: 'image.png',
          width: 16,
          height: 16
        }
      ],

      // add padding when position is `outside`
      // default is 2
      outsidePadding: 4,

      // add margin of text when position is `outside` or `border`
      // default is 2
      textMargin: 4
    }
  }
});

// custom render
{
  render: function (args) {
    // args will be something like:
    // { label: 'Label', value: 123, percentage: 50, index: 0, dataset: {...} }
    return '$' + args.value;

    // return object if it is image
    // return { src: 'image.png', width: 16, height: 16 };
  }
}

// dynamic fontColor
{
  fontColor: function (args) {
    // args will be something like:
    // { index: 0, dataset: {...} }
    return myColorTransfer(args.dataset.backgroundColor[index]);
  }
}

Support multiple options, eg.

pieceLabel: [
  {
    render: 'label',
    position: 'outside'
  },
  {
    render: 'value'
  }
]

예제 #

기본 #

pieceLabel: [
        {
          render: 'label',
          fontSize: 14,
          fontColor: ['#fff', '#fff', '#fff', '#282a2e', '#282a2e', '#282a2e', '#282a2e', '#282a2e', '#282a2e', '#282a2e'],
        },
      ],

응용 #

한 가지 단점으로 label 여러 개를 같이 표현하는 데는 어려움이 있다. 하지만 label로 이미지를 넣을 수 있는 기능이 있으므로 이미지를 만들어내는 라이브러리와 함께 사용한다면 좀 더 다양한 기능 구현이 가능하다.

pieceLabel: {
        render: 'image',
        fontSize: 10,
        fontColor: '#fff',
        overlap: true,
        position: 'default',
        images: imgLabels,
      },

Reference #

• chartjs-plugin-labels