JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<input id="slider" type="range" min="0" max="99"/>
<canvas id="myChart" height="400" ></canvas>

JavaScript

function draw(A, B, C) {
    data1 = [];
    labels1 = [];
    max = 70;
    k = Math.log(max + Math.exp(0))/(C-B);
    for (var i = A; i <= C; i++) {
        labels1[i] = i;
        if (i >= B) {
            data1[i] = max-(Math.exp(k*(i-B)))+1;
        } else {
            data1[i] = max;
        }
    }
    
    var data = {
        labels: labels1,
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: data1
            }/*,
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }*/
        ]
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width  = window.innerWidth*0.9;
    ctx.canvas.height = window.innerHeight;
    var myLineChart = new Chart(ctx).Line(data, { animation: false });
}
A = 0;
B = 15;
C = 30;
draw(A, B, C);
$('#slider').on('input', function (){
    draw(A, $('#slider').val()/100*C, C);
});