Repo: https://github.com/everestate/chartjs-plugin-waterfall
Remember to replace the script import with a path from your own directory
Last active
September 30, 2020 16:16
-
-
Save EdwinChua/0a5d66dc561fe7d3866021b18a320585 to your computer and use it in GitHub Desktop.
ChartJs minimum chart reproduction
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
| <script src="../node_modules/chartjs-plugin-waterfall/dist/chartjs-plugin-waterfall.min.js"></script> <!--UPDATE THIS--> | |
| </head> | |
| <body style="width:100%; height:100%"> | |
| <div style="position: relative; width: 50%; height:30%"> | |
| <canvas id="myChart" width="400px" height="400px"></canvas> | |
| </div> | |
| <script> | |
| var ctx = document.getElementById("myChart").getContext('2d'); | |
| const dat = { | |
| datasets: [ | |
| { | |
| label: 'Closing Costs', | |
| data: [50], | |
| backgroundColor: '#e8cdd7', | |
| stack: 'stack 1', | |
| }, | |
| { | |
| label: 'Purchase Price', | |
| data: [700], | |
| backgroundColor: '#d29baf', | |
| stack: 'stack 1', | |
| }, | |
| { | |
| data: [200], | |
| waterfall: { | |
| dummyStack: true, | |
| }, | |
| stack: 'stack 2', | |
| }, | |
| { | |
| label: 'Opening Loan Balance', | |
| data: [550], | |
| backgroundColor: '#bb6987', | |
| stack: 'stack 2', | |
| }, | |
| { | |
| label: 'Initial Cash Investment', | |
| data: [200], | |
| backgroundColor: '#a53860', | |
| stack: 'stack 3', | |
| }, | |
| ], | |
| }; | |
| var chart = new Chart(ctx, { | |
| type:'bar', | |
| plugins: [chartjsPluginWaterfall], | |
| data: dat | |
| }); | |
| </script> | |
| </body> | |
| </html> |
I tried this several ways, and it doesn't seem to work. I was never able to get this running in vanilla JavaScript.
Script files, in header:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/chartjs-plugin-waterfall.min.js"></script>
1.) As provided (lodash, chart.js, waterfall-plugin)
Errors:
-- chartjs-plugin-waterfall.js:5 - Uncaught ReferenceError: require is not defined
-- waterfall.html - Uncaught ReferenceError: chartjsPluginWaterfall is not defined
2.) As Stated by MartinDawson (lodash.groupby, lodash.merge, Chart.js, waterfall-plugin)
Errors:
-- lodash.grouby/index.js:2369 - Uncaught ReferenceError: module is not defined
-- lodash.merge/index.js:1963 - Uncaught ReferenceError: module is not defined
-- chartjs-plugin-waterfall.js:1 - Uncaught ReferenceError: require is not defined
-- waterfall.html:56 - Uncaught ReferenceError: chartjsPluginWaterfall is not defined
3.) Changed lodash.groupby and lodash.merge to type="module"
Errors: [same as #2]
4.) Added require.js, with lodash.groupby and lodash.merge
Errors:
-- require.js:5 - Uncaught Error: Module name "lodash.merge" has not been loaded yet for context: _. Use require([]) ... at chartjs-plugin-waterfall.js:1 (http://requirejs.org/docs/errors.html#notloaded)
-- -- lodash.grouby/index.js:2369 - Uncaught ReferenceError: module is not defined
-- lodash.merge/index.js:1963 - Uncaught ReferenceError: module is not defined
-- waterfall.html:54 - Uncaught ReferenceError: Chart is not defined
here solution:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-waterfall.min.js"></script>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I just tried it - and I get an Error :