plugin-textoverlap

plugin-textoverlap

new plugin-textoverlap(options) → {TextOverlap}

Description:

  • TextOverlap plugin
    Prevents label overlap using Voronoi layout.

    • NOTE:
      • Plugins aren't built-in. Need to be loaded or imported to be used.
      • Non required modules from billboard.js core, need to be installed separately.
      • Appropriate and works for axis based chart.
    • Required modules:
Source:
Examples
// Plugin must be loaded before the use.
<script src="$YOUR_PATH/plugin/billboardjs-plugin-textoverlap.js"></script>

 var chart = bb.generate({
    data: {
    	  columns: [ ... ]
    },
    ...
    plugins: [
       new bb.plugin.textoverlap({
         selector: ".bb-texts text",
         extent: 8,
         area: 3
       })
    ]
 });
import {bb} from "billboard.js";
import TextOverlap from "billboard.js/dist/billboardjs-plugin-textoverlap";

bb.generate({
    plugins: [
       new TextOverlap({ ... })
    ]
})
Parameters:
Name Type Description
options object

TextOverlap plugin options
Requires:
  • module:d3-polygon
  • module:d3-delaunay
Returns:
Type
TextOverlap

Extends

Requires

  • module:d3-polygon
  • module:d3-delaunay

Members

(static) area :number

Description:

  • Minimum area needed to show a data label.

Source:
Default Value:
  • 0

Minimum area needed to show a data label.

Type:
  • number
Example
area: 0

(static) extent :number

Description:

  • Extent of label overlap prevention.

Source:
Default Value:
  • 1

Extent of label overlap prevention.

Type:
  • number
Example
extent: 1

(static) selector :string

Description:

  • Selector string for target text nodes within chart element.

    • NOTE: If no value is given, defaults to data label text elements.
Source:
Default Value:
  • undefined

Selector string for target text nodes within chart element.

  • NOTE: If no value is given, defaults to data label text elements.
Type:
  • string
Example
// selector for data label text nodes
selector: ".bb-texts text"