Repository files navigation

Chart.js module for charting graphs. Adding new chart types:graph,forceDirectedGraph,dendrogram, andtree.

Works great withhttps://github.com/chartjs/chartjs-plugin-datalabels orhttps://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

seeExamples

CodePens

• Force Directed Layout
• Tree Layouts
• Tree With Data Labels

A Graphviz Dot File parsing package is located athttps://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 existingline 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 alsohttps://www.chartjs.org/docs/latest/charts/line.html. However, to avoid confusion, the line options have a defaultline prefix, e..glineBorderColor to specify the edge border color andpointBorderColor to specify the node border color.

data:{labels:['A','B','C'],// node labelsdatasets:[{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 labelsdatasets:[{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 onhttps://github.com/d3/d3-force/.

chart types:dendrogram,tree

The tree and dendrograms layouts are based onhttps://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 setChart.register(ForceDirectedGraphController,EdgeLine,LinearScale,PointElement);...newChart(ctx,{type:ForceDirectedGraphController.id,data:[...],});

Variant B:

import{ForceDirectedGraphChart}from'chartjs-chart-graph';newForceDirectedGraphChart(ctx,{data:[...],});

npm i -g yarnyarn installyarn sdks vscode

yarn installyarn build