chartjs-plugin-datalabels

# Bubble

{
  type: 'bubble',
  data: {
    datasets: [{
      backgroundColor: Utils.color(0),
      borderColor: Utils.color(0),
      data: generateData()
    }, {
      backgroundColor: Utils.color(1),
      borderColor: Utils.color(1),
      data: generateData()
    }]
  },
  options: {
    plugins: {
      datalabels: {
        anchor: function(context) {
          var value = context.dataset.data[context.dataIndex];
          return value.v < 50 ? 'end' : 'center';
        },
        align: function(context) {
          var value = context.dataset.data[context.dataIndex];
          return value.v < 50 ? 'end' : 'center';
        },
        color: function(context) {
          var value = context.dataset.data[context.dataIndex];
          return value.v < 50 ? context.dataset.backgroundColor : 'white';
        },
        font: {
          weight: 'bold'
        },
        formatter: function(value) {
          return Math.round(value.v);
        },
        offset: 2,
        padding: 0
      }
    },
    // Core options
    aspectRatio: 5 / 3,
    layout: {
      padding: 16
    },
    elements: {
      point: {
        radius: function(context) {
          var value = context.dataset.data[context.dataIndex];
          var size = context.chart.width;
          var base = Math.abs(value.v) / 100;
          return (size / 24) * base;
        }
      }
    },
  }
}

← Interactions →