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>
@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/[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