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
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
npm install --save chart.js chartjs-chart-graph
see Examples
CodePens
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.
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: {
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 }
]
}]
},
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/.
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
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';
// register controller in chart.js and ensure the defaults are set
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: [...],
});
npm i -g yarn
yarn install
yarn sdks vscode
yarn install
yarn build