Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kurkle/chartjs-chart-sankey
Chart.js module for creating sankey diagrams
https://github.com/kurkle/chartjs-chart-sankey
Last synced: 3 months ago
JSON representation
Chart.js module for creating sankey diagrams
- Host: GitHub
- URL: https://github.com/kurkle/chartjs-chart-sankey
- Owner: kurkle
- License: mit
- Created: 2020-05-11T19:42:22.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-23T09:30:07.000Z (5 months ago)
- Last Synced: 2024-02-13T22:01:54.752Z (4 months ago)
- Language: JavaScript
- Size: 6.67 MB
- Stars: 122
- Watchers: 6
- Forks: 20
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome - sankey
README
# chartjs-chart-sankey
[Chart.js](https://www.chartjs.org/) **^3.3** module for creating sankey diagrams
[](https://www.npmjs.com/package/chartjs-chart-sankey)
[](https://github.com/kurkle/chartjs-chart-sankey/releases/latest)
## Browser support
All modern and up-to-date browsers are supported, including, but not limited to:
- Chrome
- Edge
- Firefox
- Safari
Internet Explorer 11 is not supported.
## Typescript
Typescript 3.x and higher is supported.
## Documentation
You can use **chartjs-chart-sankey.js** as ES module. You'll need to manually register two components
```js
import {Chart} from 'chart.js';
import {SankeyController, Flow} from 'chartjs-chart-sankey';
Chart.register(SankeyController, Flow);
```
To create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the `type`
attribute to `'sankey'`
```js
const chart = new Chart(ctx, {
type: 'sankey',
data: dataObject
});
```
## Configuration
Example:
```js
const colors = {
a: 'red',
b: 'green',
c: 'blue',
d: 'gray'
};
const getColor = (key) => colors[key];
const chart = new Chart(ctx, {
type: 'sankey',
data: {
datasets: [{
label: 'My sankey',
data: [
{from: 'a', to: 'b', flow: 10},
{from: 'a', to: 'c', flow: 5},
{from: 'b', to: 'c', flow: 10},
{from: 'd', to: 'c', flow: 7}
],
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
colorMode: 'gradient', // or 'from' or 'to'
/* optional labels */
labels: {
a: 'Label A',
b: 'Label B',
c: 'Label C',
d: 'Label D'
},
/* optional priority */
priority: {
b: 1,
d: 0
},
/* optional column overrides */
column: {
d: 1
},
size: 'max', // or 'min' if flow overlap is preferred
}]
},
});
```
### Custom data structure
Custom data structure can be used by specifying the custom data keys in `options.parsing`.
For example:
```js
const chart = new Chart(ctx, {
type: 'sankey',
data: {
datasets: [
{
data: [
{source: 'a', destination: 'b', value: 20},
{source: 'c', destination: 'd', value: 10},
{source: 'c', destination: 'e', value: 5},
],
colorFrom: 'red',
colorTo: 'green'
}
]
},
options: {
parsing: {
from: 'source',
to: 'destination',
flow: 'value'
}
}
});
```
## Example
## Online examples
[codepen](https://codepen.io/kurkle/pen/bGVKPOM)
[Vue.js 2](https://codesandbox.io/s/reverent-boyd-od2fr?file=/src/App.vue)
## Development
You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):
```bash
> npm install
```
The following commands will then be available from the repository root:
```bash
> npm run build // build dist files
> npm run autobuild // build and watch for changes
> npm test // run all tests
> npm autotest // run all tests and watch for changes
> npm lint // perform code linting
> npm package // create an archive with dist files and samples
```
## License
chartjs-chart-sankey is available under the [MIT license](https://opensource.org/licenses/MIT).