• Stars
    star
    613
  • Rank 73,175 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Plugin for Chart.js to display percentage, value or label in Pie or Doughnut.

chartjs-plugin-labels

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

Demo

Demo

Download

Compress
Uncompress

CDN Link

You can put the below link in the script tag

https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js

Installation

You can also install chartjs-plugin-labels by using Bower.

bower install chartjs-plugin-labels

Or node.js, you can use this command to install:

npm install chartjs-plugin-labels

Notice

v1.0.0 has breaking changes. Please see CHANGELOG v1.0.0
v0.7.0 has deprecated options. Please see CHANGELOG v0.7.0
v0.4.0 has breaking changes. Please see CHANGELOG v0.4.0

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'
  }
]

Global options

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

For Angular 2+

If you use angular2-chartjs, you can import by this:

import { ChartModule } from 'angular2-chartjs';
import 'chartjs-plugin-labels';

License

The project is released under the MIT license.

Contact

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

More Repositories

1

js-sha256

A simple SHA-256 / SHA-224 hash function for JavaScript supports UTF-8 encoding.
JavaScript
852
star
2

js-md5

A simple MD5 hash function for JavaScript supports UTF-8 encoding.
JavaScript
771
star
3

online-tools

Online tools provides md2, md5, sha1, sha2, sha512, bas64, html encode / decode functions
HTML
728
star
4

js-sha3

A simple SHA-3 / Keccak hash function for JavaScript supports UTF-8 encoding.
JavaScript
349
star
5

js-sha1

A simple SHA1 hash function for JavaScript supports UTF-8 encoding.
JavaScript
332
star
6

jquery-lazyload-any

A jQuery plugin provides a lazyload function for images, iframe or anything.
JavaScript
231
star
7

js-sha512

A simple SHA-512, SHA-384, SHA-512/224, SHA-512/256 hash functions for JavaScript supports UTF-8 encoding.
JavaScript
216
star
8

markdown

A markdown example shows how to write a markdown file.
108
star
9

angular2-chartjs

Chart.js component for Angular2
TypeScript
95
star
10

jquery-stickit

A jQuery plugin provides a sticky header, sidebar or else when scrolling.
JavaScript
76
star
11

hi-base64

A simple Base64 encode / decode function for JavaScript supports UTF-8 encoding.
JavaScript
71
star
12

hi-base32

A simple Base32(RFC 4648) encode / decode function for JavaScript supports UTF-8 encoding.
JavaScript
61
star
13

js-htmlencode

A simple HTML encode / decode function for JavaScript.
JavaScript
55
star
14

js-crc

Simple CRC checksum functions for JavaScript(CRC-16 and CRC-32).
JavaScript
33
star
15

solidity-optimize-name

Find a optimized name for method.
JavaScript
33
star
16

jquery-animations

A CSS3 animation framework based on jQuery providing an easy way to develop cross browser CSS3 animations.
JavaScript
30
star
17

jquery-animations-tile

A plugin of jQuery-animations that provides tile animations.
JavaScript
22
star
18

jquery-appear

A jQuery plugin provides appear and disappear events to do lazyload, infinite scroll or else effect.
JavaScript
16
star
19

color-sampler

A jQuery plugin provides color sampler function for Canvas.
JavaScript
15
star
20

js-throttle-debounce

A javascript prototype plugin provides throttle and debounce methods.
JavaScript
15
star
21

jquery-animations-spotlight

A plugin of jQuery-animations that provides spotlight animations.
JavaScript
13
star
22

js-md4

A simple MD4 hash function for JavaScript supports UTF-8 encoding.
JavaScript
9
star
23

angular-appear

An AngularJS plugin provides appear and disappear events to do infinite scroll or else effect.
6
star
24

angular2-justgage

JustGage component for Angular2
TypeScript
6
star
25

js-md2

A simple MD2 hash function for JavaScript supports UTF-8 encoding.
JavaScript
4
star
26

blog

emn178's blog.
4
star
27

zipacker

Zip and download files in client side.
JavaScript
3
star
28

rails-intl-tel-input

Integrate with intl-tel-input to provide international telephone numbers input and form helper.
JavaScript
2
star
29

jquery-mscroll

A jQuery plugin enables to force to fire scroll event in mobile devices.
JavaScript
2
star
30

angular2-chartjs-sample

TypeScript
2
star
31

angular-marquee

An angular plugin provides marquee message.
2
star
32

sendcloud-mailer

An Action Mailer delivery method for SendCloud email service.
Ruby
2
star
33

sms_carrier

SMS Carrier is a framework for designing SMS service layers.
Ruby
2
star
34

devise_mobile_confirmable

It adds support to devise for confirming users' mobile by SMS.
Ruby
2
star
35

tem

1
star
36

Chart.Crosshairs.js

Crosshairs plugin for Chart.js.
JavaScript
1
star
37

chain-network

JavaScript
1
star
38

angular-bind-compile

An angular plugin provides bind html with compilation.
1
star
39

twilio-carrier

An sms_carrier delivery method for Twilio SMS service.
Ruby
1
star
40

chain-decoder

CSS
1
star
41

presenters

A simple presenter pattern for ruby. It also can work in rails.
Ruby
1
star
42

faye-jwt

A gem that provides authentication by JWT(json web token) with faye.
Ruby
1
star
43

flash-messenger

A jQuery plugin provides a simple flash messages and interface.
JavaScript
1
star
44

typescript-package-sample

Show you how to write a TypScript package.
TypeScript
1
star
45

fakesite-wechat

A fakesite plugin that provides a stub method for wechat. It's useful to bypass oauth flow in develpment environment.
Ruby
1
star