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>
<div id="text"></div>
<canvas id="myChart" width="300" height="200"></canvas>

CSS

#text {
  height: 50px;
  color: red;
}

JavaScript

var allocation = {
	"amount": 300000,
  "historical_variance": 0.00002345606782040277,
  "expected_rate": 0.11860822738109601
};

var std = Math.pow((allocation.historical_variance * 252), 0.5);
var alpha = 1.282

allocation.confidence_interval = [
	allocation.expected_rate - alpha * std,
  allocation.expected_rate + alpha * std
];

var text = document.querySelector("#text");
text.innerHTML = allocation.confidence_interval;

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 = 60

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'
            },
           ...