plugin-textoverlap

plugin-textoverlap

new plugin-textoverlap(options) → {TextOverlap}

Source:

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.
  • Required modules:
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.esm";

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

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

Extends

Requires

  • module:d3-selection
  • module:d3-polygon
  • module:d3-voronoi

Members

(static) area :number

Source:
Default Value:
  • 0

Set minimum area needed to show a data label

Type:
  • number
Example
area: 0

(static) extent :number

Source:
Default Value:
  • 1

Set extent of label overlap prevention

Type:
  • number
Example
extent: 1

(static) selector :string

Source:
Default Value:
  • ".bb-texts text"

Set selector string for target text nodes

Type:
  • string
Example
// selector for data label text nodes
selector: ".bb-texts text"