treechart
My take on building a tree chart. The build includes a starter CSS file, and two javascript versions for ES modules and current browsers. No serious attempt has been made towards ie11 compatibility.
Installation
npm i --save @buckneri/treechart
API
Data frame schema
Receives a JSON object as described below:
{
series: [
{ color: string, label: string, value: number }
]
}
Constructor
const tree = new Treechart({
container: document.getElementById("chart"),
data: data,
margin: { bottom: 20, left: 20, right: 20, top: 20 }
});
Events
tree-selected - emitted when user clicks on category
Methods
tree.clearSelection();
// clears selection from chart elements
tree.data(nodes, links);
// stores and initialises data
tree.destroy();
// self-destruct
tree.draw();
// draws chart to DOM
tree.toString();
// serialises the internal data
Properties
tree.container;
// parent element for chart
tree.formatValue
// Intl.NumberFormat instance. Default is decimal
tree.h;
// height of chart
tree.locale
// locale for formatting values. Default is en-GB
tree.margin;
// defines the border zone around the canvas
tree.rh;
// relative height, height - margins
tree.rw;
// relative width, width - margins
tree.w;
// width of chart