Skip to content

Instantly share code, notes, and snippets.

@EdwinChua

EdwinChua/README.md

Last active September 30, 2020 16:16
Show Gist options
  • Save EdwinChua/0a5d66dc561fe7d3866021b18a320585 to your computer and use it in GitHub Desktop.
Save EdwinChua/0a5d66dc561fe7d3866021b18a320585 to your computer and use it in GitHub Desktop.
Download ZIP
ChartJs minimum chart reproduction
Raw
README.md
Raw
index.html
<!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>
@grantkemp
Copy link

I just tried it - and I get an Error :

    at n (drawStepLines.js:78)
    at Object.afterDraw (index.js:64)
    at Object.notify (Chart.bundle.min.js:10)
    at t.draw (Chart.bundle.min.js:10)
    at index.js:54```

It seems to display though!

The error relates to this 

`export default (chart) => {
  const context = chart.ctx;
  const datasets = chart.data.datasets;
  const options = chart.options.plugins.waterFallPlugin.stepLines;
  const stackedDatasets = groupBy(datasets, 'stack'); <--- Error in this group
  const newDatasets = [];
`

@jeffsdata
Copy link

jeffsdata commented Feb 18, 2019 •
edited
Loading

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://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash.groupby@4.6.0/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash.merge@4.6.1/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/chartjs-plugin-waterfall@1.0.3/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

@b3rz3rkr
Copy link

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/chartjs-plugin-waterfall@1.0.3/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