Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
chartjs-chart-graph
Advanced tools
Readme
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:
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
FAQs
Chart.js module for charting graphs
The npm package chartjs-chart-graph receives a total of 748 weekly downloads. As such, chartjs-chart-graph popularity was classified as not popular.
We found that chartjs-chart-graph demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.