JSFiddle - React, Tailwind, and code Playground

by gschutz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="300" height="200"></canvas>

JavaScript

/*
[{
  label: 'Scatter Dataset',
  data: [{
    x: -10,
    y: 0
  }, {
    x: 0,
    y: 10
  }, {
    x: 10,
    y: 5
  }]
}]
*/
var allocation = {
	"amount": 100000,
  "confidence_interval": [
    0.13747485650323288,
    0.15097200160744012
  ],
  "expected_rate": 0.1442234290553365
}
console.log(allocation)
var dataset_average = {
  label: 'Expected Return (≥ 50% of confidence)',
  backgroundColor: "transparent",
  borderColor: "rgba(110, 148, 247, 1)",
  pointRadius: 0,
  data: []
}
var dataset_upper = {
  label: '≥ 2.5% of confidence',
  backgroundColor: "rgba(126, 226, 93, 0.2)",
  borderColor: "rgba(126, 226, 93, 1)",
  pointRadius: 0,
  data: []
}
var dataset_lower = {
  label: '≥ 97.5% of confidence',
  backgroundColor: "#f3f5f6",
  borderColor: "rgba(255, 125, 75, 1)",
  pointRadius: 0,
  data: []
}

function month_rate(r) {
	return Math.pow(1 + r, 1/12) - 1
}

var DURATION = 48

for(let i = 0; i < DURATION; i += 2) {
	dataset_upper.data.push({
  	x: i,
  	y: allocation.amount * Math.pow(1 + month_rate(allocation.confidence_interval[1]), i)
  })
}

for(let i = 0; i < DURATION; i += 2) {
	dataset_average.data.push({
  	x: i,
  	y: allocation.amount * Math.pow(1 + month_rate(allocation.expected_rate), i)
  })
}

for(let i = 0; i < DURATION; i += 2) {
	dataset_lower.data.push({
  	x: i,
  	y: allocation.amount * Math.pow(1 + month_rate(allocation.confidence_interval[0]), i)
  })
}

var myLineChart = new Chart("myChart", {
    type: 'line',
    data: {
    	labels: [...Array(DURATION/2).keys()].map(function(d){return d*2;}),
      datasets: [dataset_lower, dataset_average, dataset_upper]
    },
    options: {
    	gridLines: {
      	offsetGridLines: false
      },
      scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Months'
            },
            gridLines: {
              display:false
            }
          }],
          yAxes: [{
            display:...