Chart.js Graphs
Chart.js module for charting graphs. Adding new chart types: graph, forceDirectedGraph, dendogram, 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:
- 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-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
Usage
see Samples on Github
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'], // node labels
datasets: [{
data: [ // nodes as objects
{ x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
{ x: 3, y: 1 },
{ x: 5, y: 3 }
],
edges: [ // edge list where source/target refers to the node index
{ source: 0, target: 1},
{ source: 0, target: 2}
]
}]
},
Alternative structure for trees
data: {
labels: ['A', 'B', 'C'], // node labels
datasets: [{
data: [ // nodes as objects
{ x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
{ 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
Dendogram, Tree
chart types: dendogram, tree
The tree and dendograms layouts are based on https://github.com/d3/d3-hierarchy.
Dendogram Horizontal
Dendogram Vertical
Dendogram 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, Point } from 'chart.js';
import { ForceDirectedGraphController, EdgeLine } from 'chartjs-chart-graph';
// register controller in chart.js and ensure the defaults are set
Chart.register(ForceDirectedGraphController, EdgeLine, LinearScale, Point);
...
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
That's the currently configured tree.
31 Jul 29, 2022
238 Dec 31, 2022
4 Jul 27, 2022
2.2k Dec 13, 2022
56 Dec 17, 2022
2.2k Jan 4, 2023
73 Dec 1, 2022
99 Dec 18, 2022
61 Dec 14, 2022
177 Jan 4, 2023
97 Nov 9, 2022
24 Dec 12, 2022
10.3k Jan 3, 2023
2.6k Dec 19, 2022
823 Jan 7, 2023
5.1k Jan 4, 2023
362 Dec 4, 2022
22 Nov 2, 2022