chartjs-chart-graph-dagre
v3.1.0
Published
Chart.js graph chart extension using the dagre layout
Downloads
48
Maintainers
Readme
Chart.js Graphs Dagre Layout
Adds another graph controller dagre
to chart.js based on chartjs-chart-graph which uses the Dagre library for performing the graph layout.
Related Plugins
Check out also my other chart.js plugins:
- chartjs-chart-boxplot for rendering boxplots and violin plots
- chartjs-chart-error-bars for rendering errors bars to bars and line charts
- chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
- chartjs-chart-graph for rendering graphs, trees, and networks
- chartjs-chart-pcp for rendering parallel coordinate plots
- chartjs-chart-venn for rendering venn and euler diagrams
- chartjs-chart-wordcloud for rendering word clouds
- chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed
Install
npm install --save chart.js chartjs-chart-graph chartjs-chart-graph-dagre
Usage
see Samples on Github
Options
The options are wrapper for specifying dagre graph, node, and edge options. see https://github.com/dagrejs/dagre/wiki#configuring-the-layout.
interface IDagreOptions {
dagre: {
/**
* dagre graph options
*/
graph: {};
/**
* dagre node options or a function generating the option per node
*/
node: ((i: number) => {}) | {};
/**
* dagre edge options or a function generating the option per edge
*/
edge: ((source: number, target: number) => {}) | {};
};
}
ESM and Tree Shaking
The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.
Variant A:
import Chart from 'chart.js';
import { EdgeLine } from 'chartjs-chart-graph';
import { DagreGraphController } from 'chartjs-chart-graph-dagre';
// register controller in chart.js and ensure the defaults are set
Chart.register(DagreGraphController, EdgeLine);
...
new Chart(ctx, {
type: DagreGraphController.id,
data: [...],
});
Variant B:
import { DagreGraphChart } from 'chartjs-chart-graph-dagre';
new DagreGraphChart(ctx, {
data: [...],
});
Development Environment
npm i -g yarn
yarn set version 2
yarn install
yarn pnpify --sdk vscode
Building
yarn install
yarn build