chartjs-chart-sankey 0.6.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -20
- package/dist/chartjs-chart-sankey.esm.js +335 -77
- package/dist/chartjs-chart-sankey.js +338 -84
- package/dist/chartjs-chart-sankey.min.js +3 -3
- package/package.json +14 -5
- package/types/index.esm.d.ts +111 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# chartjs-chart-sankey
|
|
2
2
|
|
|
3
|
-
[Chart.js](https://www.chartjs.org/) **v3.
|
|
3
|
+
[Chart.js](https://www.chartjs.org/) **v3.3.x** module for creating sankey diagrams
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/chartjs-chart-sankey)
|
|
6
6
|
[](https://github.com/kurkle/chartjs-chart-sankey/releases/latest)
|
|
@@ -19,14 +19,28 @@ All modern and up-to-date browsers are supported, including, but not limited to:
|
|
|
19
19
|
|
|
20
20
|
Internet Explorer 11 is not supported.
|
|
21
21
|
|
|
22
|
+
## Typescript
|
|
23
|
+
|
|
24
|
+
Typescript 3.x and higher is supported.
|
|
25
|
+
|
|
22
26
|
## Documentation
|
|
23
27
|
|
|
24
|
-
|
|
28
|
+
You can use **chartjs-chart-sankey.js** as ES module. You'll need to manually register two components
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import {Chart} from 'chart.js';
|
|
32
|
+
import {SankeyController, Flow} from 'chartjs-chart-sankey';
|
|
33
|
+
|
|
34
|
+
Chart.register(SankeyController, Flow);
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
To create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the `type`
|
|
38
|
+
attribute to `'sankey'`
|
|
25
39
|
|
|
26
40
|
```js
|
|
27
|
-
new Chart(ctx, {
|
|
28
|
-
|
|
29
|
-
|
|
41
|
+
const chart = new Chart(ctx, {
|
|
42
|
+
type: 'sankey',
|
|
43
|
+
data: dataObject
|
|
30
44
|
});
|
|
31
45
|
```
|
|
32
46
|
|
|
@@ -35,21 +49,34 @@ new Chart(ctx, {
|
|
|
35
49
|
Example:
|
|
36
50
|
|
|
37
51
|
```js
|
|
38
|
-
new Chart(ctx, {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
const chart = new Chart(ctx, {
|
|
53
|
+
type: 'sankey',
|
|
54
|
+
data: {
|
|
55
|
+
datasets: [{
|
|
56
|
+
label: 'My sankey',
|
|
57
|
+
data: [
|
|
58
|
+
{from: 'a', to: 'b', flow: 10},
|
|
59
|
+
{from: 'a', to: 'c', flow: 5},
|
|
60
|
+
{from: 'b', to: 'c', flow: 10}
|
|
61
|
+
],
|
|
62
|
+
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
|
|
63
|
+
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
|
|
64
|
+
colorMode: 'gradient', // or 'from' or 'to'
|
|
65
|
+
/* optional labels */
|
|
66
|
+
labels: {
|
|
67
|
+
a: 'Label A',
|
|
68
|
+
b: 'Label B',
|
|
69
|
+
c: 'Label C'
|
|
70
|
+
},
|
|
71
|
+
/* optional priority */
|
|
72
|
+
priority: {
|
|
73
|
+
a: 0,
|
|
74
|
+
b: 1,
|
|
75
|
+
c: 2
|
|
76
|
+
},
|
|
77
|
+
size: 'max', // or 'min' if flow overlap is preferred
|
|
78
|
+
}]
|
|
79
|
+
},
|
|
53
80
|
});
|
|
54
81
|
```
|
|
55
82
|
|