npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chart.js-plugin-labels-dv

v5.0.1-beta

Published

Chart.js plugin to display labels on pie, doughnut and polar area chart.

Downloads

28,264

Readme

Maintainability npm Donate

NPM

Chart.js Plugin Labels for Chart.js v4+

Chart.js plugin to display labels on pie, doughnut and polar area chart. Forked from emn178/chartjs-plugin-labels.

Demo

  • Demo from the original repo using Chart.js v2.x, but it's almost the same.

Download

CDN Link

You can put the below link in the script tag

https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js

Install from NPM

  • npm i chart.js-plugin-labels-dv

Usage

JavaScript

new Chart(ctx, {
  type: type,
  data: data,
  options: {
    plugins: {
      labels: {
        // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
        render: 'value',
        // precision for percentage, default is 0
        precision: 0,
        // identifies whether or not labels of value 0 are displayed, default is false
        showZero: true,
        // font size, default is defaultFontSize
        fontSize: 12,
        // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
        fontColor: '#fff',
        // font style, default is defaultFontStyle
        fontStyle: 'normal',
        // font family, default is defaultFontFamily
        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
        // draw text shadows under labels, default is false
        textShadow: true,
        // text shadow intensity, default is 6
        shadowBlur: 10,
        // text shadow X offset, default is 3
        shadowOffsetX: -5,
        // text shadow Y offset, default is 3
        shadowOffsetY: 5,
        // text shadow color, default is 'rgba(0,0,0,0.3)'
        shadowColor: 'rgba(255,0,0,0.75)',
        // draw label in arc, default is false
        // bar chart ignores this
        arc: true,
        // position to draw label, available value is 'default', 'border' and 'outside'
        // bar chart ignores this
        // default is 'default'
        position: 'default',
        // draw label even it's overlap, default is true
        // bar chart ignores this
        overlap: true,
        // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
        showActualPercentages: true,
        // set images when `render` is 'image'
        images: [
          {
            src: 'image.png',
            width: 16,
            height: 16
          }
        ],
        // add padding when position is `outside`
        // default is 2
        outsidePadding: 4,
        // add margin of text when position is `outside` or `border`
        // default is 2
        textMargin: 4
      }
    }
  }
});

// custom render
{
  render: function (args) {
    // args will be something like:
    // { label: 'Label', value: 123, percentage: 50, index: 0, dataset: {...} }
    return '$' + args.value;
    // return object if it is image
    // return { src: 'image.png', width: 16, height: 16 };
  }
}

// dynamic fontColor
{
  fontColor: function (args) {
    // args will be something like:
    // { index: 0, dataset: {...} }
    return myColorTransfer(args.dataset.backgroundColor[index]);
  }
}

Support multiple options, eg.

labels: [
  {
    render: 'label',
    position: 'outside'
  },
  {
    render: 'value'
  }
]

Default options

Chart.defaults.plugins.labels = {
  // ...
};

React

From https://github.com/DavideViolante/chartjs-plugin-labels/issues/5#issuecomment-1237995604

import React from 'react';
import { Chart } from 'chart.js';
import * as helpers from 'chart.js/helpers';

export const LabelPluginProvider: React.FC = ({ children }) => {
  React.useEffect(() => {
    window.Chart = Chart;
    Chart.helpers = helpers;
    import('chart.js-plugin-labels-dv');
  }, []);
  return children;
};

Vue

From https://github.com/DavideViolante/chartjs-plugin-labels/issues/2#issuecomment-1483948596

import Chart from "chart.js/auto";
import * as helpers from "chart.js/helpers";

Then inside the created() hook:

async created() {
  window.Chart = Chart;
  Chart.helpers = helpers;
  awaitimport("chart.js-plugin-labels-dv");
}

Angular

Codesandbox example

You would need to create your own chart component.

<div class="chart">
  <canvas [id]="name"></canvas>
</div>

Importing should be straightforward

import Chart from 'chart.js/auto';
import { getChartLabelPlugin, PLUGIN_ID } from 'chart.js-plugin-labels-dv';
@Input() chartConfig: any;
@Output() chartCreated: EventEmitter<Chart> = new EventEmitter<Chart>();

public readonly name: string = `chart-${ChartComponent.instanceCount++}`;
private chart: Chart;

ngAfterViewInit(): void {
  this.createChart();
}

private createChart(): void {
  if (!this.hasRegisteredPlugin()) {
    Chart.register(getChartLabelPlugin());
  }
    
  this.chart = new Chart(this.name, this.chartConfig);
  this.chartCreated.emit(this.chart);
}

private hasRegisteredPlugin(): boolean {
    return !!Chart.registry?.plugins.get(PLUGIN_ID);
}

For fixing the module failed compilation error I have updated tsconfig as follows:

Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /node_modules/chart.js-plugin-labels-dv/src/chart-label.ts is missing from the TypeScript compilation.
Please make sure it is in your tsconfig via the 'files' or 'include' property.

tsconfig.json

"files": [
  ...
  "node_modules/chart.js-plugin-labels-ed/src/chart-label.ts"
],

Test it out with data from the official Chart.js website: https://www.chartjs.org/docs/latest/charts/doughnut.html#pie

License

MIT license.

Contact

The project's website is located at https://github.com/emn178/chartjs-plugin-labels
Authors: Chen, Yi-Cyuan ([email protected]), Davide Violante, eduard-landclan