JSFiddle - React, Tailwind, and code Playground

by askhflajsf

HTML

<script src="https://rawgit.com/chartjs/chartjs.github.io/master/dist/master/Chart.bundle.min.js"></script>
<!-- Netto holding: 10000 - 4000 = 6000
     Netto mining: 24000 - 4000 = 20000 -->
<h3>Investment 2017: $8,000<br>Profit 2020: $26,000</h3>
<p>Based on data from <a href="http://www.coinpurveyor.com/buy-hold-vs-mining-bitcoin/">Coin Purveyor</a>, if <a href="https://www.cnbc.com/2017/05/31/bitcoin-price-forecast-hit-100000-in-10-years.html">bitcoin reaches $100,000 the next 10 years</a>.</p>
<canvas id="bar-chart"></canvas>

JavaScript

var sharedOptions = {
  responsive: true,
  legend: {
    display: true,
    position: "right"
  },
  title: {
    display: false
  },
  scales: {
    xAxes: [{
      stacked: true,
    }],
    yAxes: [{
      stacked: true
    }]
  }
}

var barChartData = {
  labels: ["2017", "2018", "2019", "2020"],
  datasets: [{
    label: 'Holding',
    backgroundColor: "#ccc",
    data: [
      // 1 btc per Sep 25 2017 ($4000)
      4000,
      0,
      0,
      // 2020 estimate ($10,000)
      10000
    ]
  }, {
    label: 'Mining',
    backgroundColor: "#000",
    data: [
      0,
      // 1 btc per Sep 25 2017
      4000,
      // 1.8btc / 1btc per Sep 25 2017 * 2020 estimate
      // 7100 / 4000 * 10000
      17550,
      // 2.4btc * 2020 estimate
      24000
    ]
  }]
};

var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: barChartData,
  options: sharedOptions
});