> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/pro-pack/chartjs/data-labels.md).

# Data Labels

The [chartjs-plugin-datalabels](https://chartjs-plugin-datalabels.netlify.app) plugin is an extension library that allows labels to be turn on for the elements of chart.  

By default, datalabels are turned off.  To turn them on, use the pass-through for the [native datalabels configuration](https://chartjs-plugin-datalabels.netlify.app/guide/options.html).

The following example turns on data labels and also changes their text to `white`.

```javascript
const chart = new wire.chartjs().render("#chart", {
    ...
    datalabels: {
        display: true,
        color: "white"
    }    
});            

```

## Library

Chart.js for WireBootstrap will load `chartjs-plugin-datalabels.min.js` from a [CDN](https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.6.0/dist/chartjs-plugin-datalabels.min.js) if it's not found on the page.