Skip to content

Instantly share code, notes, and snippets.

@dodikk

dodikk/PaymentsTrackingChart.html.md

Created April 13, 2023 12:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dodikk/cb6cca2b2d2f7437c41c157e5b00f7ef to your computer and use it in GitHub Desktop.
Save dodikk/cb6cca2b2d2f7437c41c157e5b00f7ef to your computer and use it in GitHub Desktop.
Download ZIP
Stacked bar chart based on ChartJs
Raw
PaymentsTrackingChart.html.md 
<html style="width:97%;height:100%;">
  <head><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script></head>
  <body style="width:100%;height:100%;">
    <div id="chart-container" style="width:100%;height:100%;">
  <canvas id="chart" />
</div>
    <script>var config = {"type":"bar","data":{"datasets":[{"label":"Cancelled","data":[49.0,45.0,25.0,16.0,36.0,32.0,22.0],"backgroundColor":"#F859AC","stack":"Stack 0"},{"label":"Paid","data":[17.0,22.0,33.0,23.0,4.0,35.0,20.0],"backgroundColor":"#11BFBF","stack":"Stack 0"},{"label":"Timed Out","data":[42.0,20.0,7.0,33.0,22.0,14.0,18.0],"backgroundColor":"#1C60DD","stack":"Stack 0"}],"labels":["1","2","3","4","5","6","7"]},"options":{"responsive":true,"maintainAspectRatio":false,"legend":{"position":"top"},"animation":{"animateScale":true},"scales":{"x":{"stacked":true},"y":{"stacked":true}}}};
window.onload = function() {
  var canvasContext = document.getElementById("chart").getContext("2d");
  new Chart(canvasContext, config);
};</script>
  </body>
</html>

Based on https://blog.dangl.me/archive/building-hacky-but-free-graphs-and-charts-in-xamarinforms-with-chartjs/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment