exactlyallan/SimpleScatter.html

## SimpleScatter.html
<html>
<head>
    <meta charset="utf-8">
    <title>Simple Scatter</title>
</head>
<body>
    <h2>Scatter Example</h2>
    <canvas id="scatter" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.min.js" integrity="sha512-HyprZz2W40JOnIBIXDYHCFlkSscDdYaNe2FYl34g1DOmE9J+zEPoT4HHHZ2b3+milFBtiKVWb4sorDVVp+iuqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        const data = {
            datasets: [{
                label: 'Scatter Dataset',
                data: [{
                    x: -10,
                    y: 0
                }, {
                    x: 0,
                    y: 10
                }, {
                    x: 10,
                    y: 5
                }, {
                    x: 0.5,
                    y: 5.5
                }],
                backgroundColor: 'rgb(255, 99, 132)'
            }],
        };

        const config = {
            type: 'scatter',
            data: data,
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom'
                    }
                }
            }
        };

        const ctx = document.getElementById('scatter');
        new Chart(ctx, config)

    </script>

</body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simple Scatter</title>
	</head>
	<body>
	<h2>Scatter Example</h2>
	<canvas id="scatter" width="600" height="400"></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.min.js" integrity="sha512-HyprZz2W40JOnIBIXDYHCFlkSscDdYaNe2FYl34g1DOmE9J+zEPoT4HHHZ2b3+milFBtiKVWb4sorDVVp+iuqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
	const data = {
	datasets: [{
	label: 'Scatter Dataset',
	data: [{
	x: -10,
	y: 0
	}, {
	x: 0,
	y: 10
	}, {
	x: 10,
	y: 5
	}, {
	x: 0.5,
	y: 5.5
	}],
	backgroundColor: 'rgb(255, 99, 132)'
	}],
	};

	const config = {
	type: 'scatter',
	data: data,
	options: {
	scales: {
	x: {
	type: 'linear',
	position: 'bottom'
	}
	}
	}
	};

	const ctx = document.getElementById('scatter');
	new Chart(ctx, config)

	</script>

	</body>
	</html>