Chart.js Graphs
Chart.js module for charting graphs. Adding new chart types: graph
, forceDirectedGraph
, dendrogram
, and tree
.
Works great with https://github.com/chartjs/chartjs-plugin-datalabels or https://github.com/chrispahm/chartjs-plugin-dragdata
Related Plugins
Check out also my other chart.js plugins:
Install
npm install --save chart.js chartjs-chart-graph
Usage
see Examples
CodePens
Graphviz Dot File Parsing
A Graphviz Dot File parsing package is located at https://github.com/sgratzl/chartjs-chart-graph-dot-parser.
It creates compatible data structures to be consumed by this plugin.
Styling
The new chart types are based on the existing line
controller. Tho, instead of showing a line per dataset it shows edges as lines. Therefore, the styling options for points and lines are the same. See also https://www.chartjs.org/docs/latest/charts/line.html. However, to avoid confusion, the line options have a default line
prefix, e..g lineBorderColor
to specify the edge border color and pointBorderColor
to specify the node border color.
Data Structure
data: {
labels: ['A', 'B', 'C'],
datasets: [{
data: [
{ x: 1, y: 2 },
{ x: 3, y: 1 },
{ x: 5, y: 3 }
],
edges: [
{ source: 0, target: 1},
{ source: 0, target: 2}
]
}]
},
Alternative structure for trees
data: {
labels: ['A', 'B', 'C'],
datasets: [{
data: [
{ x: 1, y: 2 },
{ x: 3, y: 1, parent: 0 },
{ x: 5, y: 3, parent: 0 }
]
}]
},
Force Directed Graph
chart type: forceDirectedGraph
Computes the x,y position of nodes based on a force simulation. It is based on https://github.com/d3/d3-force/.
Options
Dendrogram, Tree
chart types: dendrogram
, tree
The tree and dendrograms layouts are based on https://github.com/d3/d3-hierarchy.
Dendrogram Horizontal
Dendrogram Vertical
Dendrogram Radial
Tidy Tree Horizontal
Tidy Tree Vertical
Tidy Tree Radial
Options
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, LinearScale, PointElement } from 'chart.js';
import { ForceDirectedGraphController, EdgeLine } from 'chartjs-chart-graph';
Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, PointElement);
...
new Chart(ctx, {
type: ForceDirectedGraphController.id,
data: [...],
});
Variant B:
import { ForceDirectedGraphChart } from 'chartjs-chart-graph';
new ForceDirectedGraphChart(ctx, {
data: [...],
});
Development Environment
npm i -g yarn
yarn install
yarn sdks vscode
Building
yarn install
yarn build