JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.chartjs.org/docs/Chart.js"></script>
<div style="height:2000px"></div>
<div>
   <canvas id="canvas" height="450" width="600"></canvas>
</div>
<div style="height:2000px"></div>

JavaScript

var radarChartData = {
    labels: ["x", "x", "x", "x", "x"],
    datasets: [{
        fillColor: "rgba(255, 97, 10, 0.5)",
        strokeColor: "rgb(255, 97, 10)",
        pointColor: "rgba(255, 255, 255, 1)",
        pointStrokeColor: "rgba(255, 255, 255, 1)",
        data: [48, 46, 47, 48, 38]
    }]

}

var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function () {
    if (isScrolledIntoView('#canvas')) {
        if (inView) {
            return;
        }
        inView = true;
        new
        Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            scaleShowLabels: false,
            scaleShowLabelBackdrop: false,
            scaleFontColor: "#fff",
            pointLabelFontSize: 14,
            pointLabelFontColor: "#fff",
            angleLineColor: "rgba(163, 165, 93,0.8)",
            scaleLineColor: "rgba(163, 165, 93,0.5)"
        });
    } else {
        inView = false;
    }
});