JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var doughnutData = [
				{
					value: 30,
					color:"#F7464A"
				},
				
				{
					value : 120,
					color : "#4D5360"
				}
			
			];
			
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")).Doughnut(doughnutData);
    } else {
        inView = false;  
    }
});