Labels

By default, a single label is created per data, however, it's possible to define multiple labels for each data element using the labels option. This option is an object where each property represents a new label, the key being the label key and the value being the options specific to each label. These options are merged on top of the options defined at the chart and dataset levels.

Multiple Labels

The following snippet creates two labels for every data element, the first with title as key and the second with value as key. The title label text is blue with font in bold. The value label text is green with normal font.

{
    options: {
        plugins: {
            datalabels: {
                color: 'blue',
                labels: {
                    title: {
                        font: {
                            weight: 'bold'
                        }
                    },
                    value: {
                        color: 'green'
                    }
                }
            }
        }
    }
}

Dataset Overrides

While the previous example creates multiple labels with the same options for all datasets, it's possible to add, modify and remove labels for specific datasets by referring to the label key.

Modifying Labels

To modify a label for a specific dataset, create an entry in the labels dataset options using the same key:

{
    data: {
        datasets: [{
            // First dataset.
            datalabels: {
                color: 'yellow'
            }
        }, {
            // Second dataset.
            datalabels: {
                labels: {
                    title: {
                        color: 'green'
                    }
                }
            }
        }]
    },
    options: {
        plugins: {
            datalabels: {
                color: 'pink',
                labels: {
                    value: {},
                    title: {
                        color: 'blue'
                    }
                }
            }
        }
    }
}

This example creates for each data element in the first dataset:

  • a value label with text in yellow
  • a title label with text in blue

and for each data element in the second dataset:

  • a value label with text in pink
  • a title label with text in green

IMPORTANT

Options defined under each labels.<key> always override options defined at the chart and dataset level (in the previous example, the title label text of the first dataset is blue, not yellow).

Adding Label

To add a new label to a specific dataset, create an entry under the labels dataset options using a inexistent label key. The following example creates one label (title) for each data element in the first dataset and two labels (title and value) for each data element in the second dataset:

{
    data: {
        datasets: [{
            // First dataset.
        }, {
            // Second dataset.
            datalabels: {
                labels: {
                    value: {
                        color: 'green'
                    }
                }
            }
        }]
    },
    options: {
        plugins: {
            datalabels: {
                labels: {
                    title: {
                        color: 'blue'
                    }
                }
            }
        }
    }
}

Removing Label

To remove a label for a specific dataset, create an null entry under the labels dataset options for the key of the label to remove. The following example removes the title label in the second dataset:

{
    data: {
        datasets: [{
            // First dataset.
        }, {
            // Second dataset.
            datalabels: {
                labels: {
                    title: null
                }
            }
        }]
    },
    options: {
        plugins: {
            datalabels: {
                labels: {
                    title: {
                        color: 'blue'
                    }
                }
            }
        }
    }
}