chartsjs-plugin-data-labels

Plugin for ChartJS to draw labels on charts

Installation

You can download the latest version of Plugin for ChartJS to draw labels on charts from the GitHub releases

To install via npm:

npm i chartsjs-plugin-data-labels

Configuration

To configure this plugin, you can simply add the following entries to your chart options:

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | display | Boolean | true | true to enable this graph, else false to disable it for the associated graph. | fontSize | Number | Chart.defaults.global.defaultFontSize | | fontStyle | String | Chart.defaults.global.defaultFontStyle | | fontFamily | String | Chart.defaults.global.defaultFontFamily | | color | String | Chart.defaults.global.defaultFontColor | One color for all labels. | colors | Array | [] | It takes a set of values for each labels. If not specified, the default color. | minRadius | Number | 35 | The minimum radius, in pixels, in which even the labels are displayed (for pie charts).

For example:

datasets: [
  {
    dataLabels: {           //  disabled by default
        colors: ['#fff', '#ccc', '#000'], //  Array colors for each labels
        minRadius: 30, //  minimum radius for display labels (on pie charts)
    }
  }
]

Please see JSBin: https://jsbin.com/joponil/4/edit