chartjs-plugin-datalabels

# Interactions

Use scriptable options to change the style and content of the labels when the user interacts with the chart.

{
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'France',
      backgroundColor: Utils.color(0),
      borderColor: Utils.color(0),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 10,
        max: 100
      }),
      datalabels: {
        align: function(context) {
          return context.active ? 'start' : 'center';
        }
      }
    }, {
      label: 'Canada',
      backgroundColor: Utils.color(1),
      borderColor: Utils.color(1),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      })
    }, {
      label: 'USA',
      backgroundColor: Utils.color(2),
      borderColor: Utils.color(2),
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      datalabels: {
        align: function(context) {
          return context.active ? 'end' : 'center';
        }
      }
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.active ? context.dataset.backgroundColor : 'white';
        },
        borderColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderRadius: function(context) {
          return context.active ? 0 : 32;
        },
        borderWidth: 3,
        color: function(context) {
          return context.active ? 'white' : context.dataset.backgroundColor;
        },
        font: {
          weight: 'bold'
        },
        formatter: function(value, context) {
          value = Math.round(value * 100) / 100;
          return context.active
            ? context.dataset.label + '\n' + value + '%'
            : Math.round(value);
        },
        offset: 8,
        padding: 5,
        textAlign: 'center'
      }
    },
    // Core options
    aspectRatio: 5 / 3,
    layout: {
      padding: {
        bottom: 16,
        right: 40,
        left: 8,
        top: 40
      }
    },
    hover: {
      mode: 'index',
      intersect: false
    },
    elements: {
      line: {
        fill: false,
        tension: 0.4
      }
    },
    scales: {
      y: {
        stacked: true
      }
    }
  }
}

← Data →