chartjs-plugin-datalabels

# Doughnut

{
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: Utils.colors({
        color: Utils.color(0),
        count: DATA_COUNT
      }),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        anchor: 'end'
      }
    }, {
      backgroundColor: Utils.colors({
        color: Utils.color(1),
        count: DATA_COUNT
      }),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        anchor: 'center',
        backgroundColor: null,
        borderWidth: 0
      }
    }, {
      backgroundColor: Utils.colors({
        color: Utils.color(2),
        count: DATA_COUNT
      }),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        anchor: 'start'
      }
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderColor: 'white',
        borderRadius: 25,
        borderWidth: 2,
        color: 'white',
        display: function(context) {
          var dataset = context.dataset;
          var count = dataset.data.length;
          var value = dataset.data[context.dataIndex];
          return value > count * 1.5;
        },
        font: {
          weight: 'bold'
        },
        padding: 6,
        formatter: Math.round
      }
    },
    // Core options
    aspectRatio: 4 / 3,
    cutoutPercentage: 32,
    layout: {
      padding: 32
    },
    elements: {
      line: {
        fill: false
      },
      point: {
        hoverRadius: 7,
        radius: 5
      }
    },
  }
}

← Polar Area →