JSFiddle - React, Tailwind, and code Playground

HTML

<body>    
    <!-- This version is old, but works -->
    <script src="https://cdn.rawgit.com/hay-wire/Chart.js/skip-xlabels/Chart.js"></script>
    
    <!-- These *ought* to work, but don't -->
    <!--<script src="https://cdn.rawgit.com/hay-wire/Chart.js/v1.0.1-beta.3/Chart.min.js"></script>-->
    <!--<script src="https://rawgit.com/hay-wire/Chart.js/showXLabels/Chart.js"></script>-->

    <!-- This original version lacks the X-axis label skipping feature -->
    <!--<script src="https://cdn.rawgit.com/nnnick/Chart.js/release/1.1/Chart.min.js"></script>-->
    
    <p id="instructions1">This Fiddle can be used to explore different exponential interpolation functions.</p>
    <p id="instructions2">Mouseover the graph to show detailed values. Examine the source for more information and to add more functions.</p>
    <div id="chartdiv"><canvas id="chartcanvas"></canvas></div>
    <div id="log"/>
</body>

CSS

body {
    font-family: "Arial";
}
p {
    margin-top: 0em;
    margin-bottom: 0.3em;
}
#instructions1 {
    font-size: 11pt;
    text-align: center;
    padding:0px;
}
#instructions2 {
    font-family: Arial;
    font-size: 9pt;
    text-align: center;
}
#log {
    font-family: Liberation Mono,Consolas,Monaco,Lucida Console,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
    font-size: 10pt;
     background-color:#EEEEEE;
}
#chartdiv {
    width: 100%;
    height: 600px;
}
#chartcanvas {
    width:100%;
    height:100%;
}

// For chart legend
.legend .color-sample {
    display: block;
    float: left;
    width: 1em;
    height: 1em;
    border: 2px solid;
    border-radius: 0.5em;
    margin-right: 0.5em;
}

JavaScript

// ################################### DEFINE CURVES ##########################################################

// Each element in this array represents a curve that will be plotted on the graph.
// You can copy/paste the sections below to create new curves with your own custom functions to explore.
// The <func> argument should be a function that takes an input between 0 and 1 and returns a real number.
var curves = [];

// EXAMPLE CURVE: Simple example monotonic cubic spline
log("Calculating Monotonic Cubic Blue parameters");
curves.push({
    label:	"Monotonic Cubic Blue",
    color:	"rgb(0,0,255)",
    func:	createInterpolant(	[0,    0.5,     0.75,       1],
								[5,    150,    10000,  150000]	)
});

// EXAMPLE CURVE: Refined monotonic cubic spline, follows the red gain example more closely
log("<br/>Calculating Monotonic Cubic Cyan parameters");
curves.push({
    label:	"Monotonic Cubic Cyan",
    color:	"rgb(0,204,204)",
    func:	createInterpolant(	[0,    0.5,     .7,   0.75,    .82,     .9,       1],
								[5,    150,  4000,    9000,  19800,  50000,  150000]	)
});

/* Disabled for now
// EXAMPLE CURVE: Giant monotonic cubic spline investigated during testing
log("<br/>Calculating Monotonic Cubic Black")
curves.push({
    label:	"Monotonic Cubic Black",
    color:	"rgb(0,0,0)",
    func:	createInterpolant(	[0,  0.15,  .25,    .4,    .6,    0.75,     0.85,        1],
								[10,  206,  558,  3656, 20676,  119519,  4257956, 34647060]	)
})
*/

// EXAMPLE CURVE: Gain function, hacked together at https://www.desmos.com/calculator/fj5dg61lef
// and adapted from http://www.chiefdelphi.com/media/papers/2421
// Approximate mappings:
// 		0		     5
//		.5		   150
//		.75		 10000
//		1		150000
curves.push({
    label:	"Gain function hacked at Desmos",
    color:	"rgb(255,0,0)",
    func:	function(x) {
        		var b = 5 / 150000, a = 0.9996, c = 10.2;
        		return (b + (1 - b) * (a * Math.pow(x, c) + (1 - a) * x)) * 150000;
    		}
});

// EXAMPLE CURVE:...