@arec0000/chartjs-plugin-datalabels

Important Notice

This is a fork of the original package and it's not supported by the official developers of chartjs-plugin-datalabels.

New features:

• Border style customization:
  • borderDash — dash pattern, similar to the setLineDash() method of the Canvas 2D API
  • borderDashOffset — adjust the offset of the dash pattern, similar to the lineDashOffset property of the Canvas 2D API
  • borderCapStyle — similar to the lineCap property of the Canvas 2D API
• Text decoration, you can add flexibly customizable underlines, overlines, or strikethrough lines:
  • placement — position of the line ('underline', 'overline', 'line-through')
  • color (defaults to the datalabel color)
  • thickness
  • length (you can provide a function that uses the text width to calculate the length)
  • offset — vertical offset in px
  • lineDash — dash pattern, similar to the setLineDash() method of the Canvas 2D API
  • lineDashOffset — adjust the offset of the dash pattern, similar to the lineDashOffset property of the Canvas 2D API
  • lineCapStyle — similar to the lineCap property of the Canvas 2D API

New features are still being tested and may not be fully functional yet.

I plan to submit these changes as a pull request to the official chartjs-plugin-datalabels package in the future.

Overview

Highly customizable Chart.js plugin that displays labels on data for any type of charts.

Requires Chart.js 3.x or higher.

Documentation

• Introduction
• Getting Started
• Options
• Labels
• Positioning
• Formatting
• Events
• TypeScript
• Migration
• Samples

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> npm run build            // build dist files
> npm run build:dev        // build and watch for changes
> npm run test             // run all tests and generate code coverage
> npm run test:dev         // run all tests and watch for changes
> npm run lint             // perform code linting
> npm run lint -- --fix    // automatically fix linting problems
> npm run docs             // generate documentation (`dist/docs`)
> npm run docs:dev         // generate documentation and watch for changes

License

chartjs-plugin-datalabels is available under the MIT license.