ChartLineLabelPlugin

This is a little javascript demo to label segments of a pie chart with anchor lines based on the popular Chart.js library.

Usage

The plugin is not a 'real' npm plugin yet. You can just copy the code into your javascript code and add the plugin to your chart's plugin list:

const config = {
      type: 'pie',
      data: data,
      options: options,
      plugins: [chartLineLabelPlugin, ...]
    };

Properties

There are several properties you can set to change the appearance of the labels.

 const options = {
   ...
   plugins: {
      chartLineLabelPlugin: {
         labelSpace: 120,
         lineHeightFactor: 1.2,
         anchorCenterPercent: 100,
         font: "12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
         color: 'gray',
         edgePadding: 25,
         halo: true,
         alignLabels: false,
         showDebugInfos: false
   },
   ...
};

labelSpace and labelSpacePercent

The labelSpace defines padding left and right in pixel or in percent of the total width (labelSpacePercent).

labelSpace: 50

labelSpace: 200

lineHeightFactor

The lineHeightFactor defines the height. A lineHeightFactor of 1 means that each line is the same height as the font size.

lineHeightFactor: 1

lineHeightFactor: 2

anchorCenterPercent

The anchorCenterPercent defines the position of the inner point of the anchor line. 100 is exactly on the circle border while 0 is the center of the circle. 50 is therefore right in the middle of each pie arc.

anchorCenterPercent: 50

anchorCenterPercent: 25

font

Defines the font family and size.

color

The color of the text and the anchor lines.

color: darkred

edgePadding

Distance of the anchor line breaking point to the border of the circle.

edgePadding: 0

edgePadding: 55

halo

Is true, when a white halo line should be drawn for better visual differentiation of the anchor lines.

halo: false

alignLabels

The labels can all be aligned at the left/right edge of the diagram (alignLabels = true) or at the nearer distance to the circle, depending on the text length (alignLabels = false).

|:---:|:---:| | | | | alignLabels: false | alignLabels: true |

showDebugInfos

If this is set true there are additional infos like the line numbers are shown for debug purposes.