bobper/chartjs_with_circles.html

## chartjs_with_circles.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>Neo Chart </title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* Set the width and height of the canvas element */
        canvas {
            width: 100%;
            height: 100%;
        }

        /* Position the boxes */
        .box {
            position: absolute;
            padding: 10px;
            background-color: white;
            border: 1px solid black;
            border-radius: 5px;
            z-index: 10;
            max-width: 300px;
            text-align: right;
        }

        /* Position the top left box */
        .box.top-left {
            top: 220px;
            left: 10%;
        }

        /* Position the top right box */
        .box.top-right {
            top: 220px;
            right: 10%;
        }

        .top-top {
            position: absolute;
            padding: 10px;
            background-color: white;
            /* border: 1px solid black; */
            z-index: 10;
            top: 10px;

        }

        /* Position the bottom left box */
        .box.bottom-left {
            top: 1055px;
            left: 10%;
        }

        /* Position the bottom right box */
        .box.bottom-right {
            top: 1055px;
            right: 10%;
        }

        .item_name_link {
            margin: 0.5rem;
            padding: 0.5rem;
            border: 1px solid silver;
            border-radius: 5px;
        }
    </style>
</head>

<body>


    <canvas id="myChart"></canvas>

    <!-- Add the four boxes -->
    <div class="box top-left">
        <p>{{ $selectedItem->top_left_title }}</p>
        <p>{{ $selectedItem->top_left }}</p>
    </div>
    <div class="box top-right">
        <p>{{ $selectedItem->top_right_title }}</p>
        <p>{{ $selectedItem->top_right }}</p>
    </div>
    <div class="box bottom-left">
        <p>{{ $selectedItem->bottom_left_title }}</p>
        <p>{{ $selectedItem->bottom_left }}</p>
    </div>
    <div class="box bottom-right">
        <p>{{ $selectedItem->bottom_right_title }}</p>
        <p>{{ $selectedItem->bottom_right }}</p>

    </div>


    <script>
        // Center point of the circle and circle radius
        const center = {
            x: 50,
            y: 50
        };
        const radius = 355;
        // const point = [{35,78}];
        // Data for the scatter chart
        const data = {
            datasets: [{
                    label: "Circle",
                    data: [{
                        x: center.x,
                        y: center.y
                    }],
                    pointRadius: 355,
                    pointHoverRadius: 355,
                    pointBackgroundColor: "transparent",
                    pointBorderColor: "black",
                    borderWidth: 1
                },
                {
                    label: "Circle2",
                    data: [{
                        x: center.x,
                        y: center.y
                    }],
                    pointRadius: 194,
                    pointHoverRadius: 194,
                    pointBorderColor: "black",
                    pointBackgroundColor: "transparent",
                    borderWidth: 1,
                    backgroundColor: "rgba(211, 200, 225, 0.8)"
                },
                {
                    label: "Circle3",
                    data: [{
                        x: center.x,
                        y: center.y
                    }],
                    pointRadius: 94,
                    pointHoverRadius: 94,
                    pointBorderColor: "black",
                    borderWidth: 3,
                    backgroundColor: "rgba(211, 200, 225, 0.8)"
                },
                {
                    label: "point",
                    data: [{x:45, y:75}],
                    pointRadius: 3,
                    pointBorderColor: "indianred",
                    borderWidth: 10,
                    backgroundColor: "indianred"
                }
            ]
        };

        // Options for the scatter chart
        const options = {
            responsive: true,
            maintainAspectRatio: false,
            aspectRatio: 1,
            scales: {
                x: {
                    type: "linear",
                    position: "center",
                    min: 20,
                    max: 80,
                    ticks: {
                        stepSize: 10
                    },
                    grid: {
                        drawOnChartArea: false
                    }
                },
                y: {
                    type: "linear",
                    position: "center",
                    min: 20,
                    max: 80,
                    ticks: {
                        stepSize: 10
                    },
                    grid: {
                        drawOnChartArea: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    mode: 'nearest',
                    intersect: false,
                    enabled: true,
                    filter: (tooltipItem) => {
                        return tooltipItem.datasetIndex === 3; // Only show tooltip for the point dataset
                    },
                }
            }
        };

        // Create the scatter chart
        const ctx = document.getElementById("myChart").getContext("2d");
        const chart = new Chart(ctx, {
            type: "scatter",
            data: data,
            options: options
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">

	<title>Neo Chart </title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<style>
	/* Set the width and height of the canvas element */
	canvas {
	width: 100%;
	height: 100%;
	}

	/* Position the boxes */
	.box {
	position: absolute;
	padding: 10px;
	background-color: white;
	border: 1px solid black;
	border-radius: 5px;
	z-index: 10;
	max-width: 300px;
	text-align: right;
	}

	/* Position the top left box */
	.box.top-left {
	top: 220px;
	left: 10%;
	}

	/* Position the top right box */
	.box.top-right {
	top: 220px;
	right: 10%;
	}

	.top-top {
	position: absolute;
	padding: 10px;
	background-color: white;
	/* border: 1px solid black; */
	z-index: 10;
	top: 10px;

	}

	/* Position the bottom left box */
	.box.bottom-left {
	top: 1055px;
	left: 10%;
	}

	/* Position the bottom right box */
	.box.bottom-right {
	top: 1055px;
	right: 10%;
	}

	.item_name_link {
	margin: 0.5rem;
	padding: 0.5rem;
	border: 1px solid silver;
	border-radius: 5px;
	}
	</style>
	</head>

	<body>


	<canvas id="myChart"></canvas>

	<!-- Add the four boxes -->
	<div class="box top-left">
	<p>{{ $selectedItem->top_left_title }}</p>
	<p>{{ $selectedItem->top_left }}</p>
	</div>
	<div class="box top-right">
	<p>{{ $selectedItem->top_right_title }}</p>
	<p>{{ $selectedItem->top_right }}</p>
	</div>
	<div class="box bottom-left">
	<p>{{ $selectedItem->bottom_left_title }}</p>
	<p>{{ $selectedItem->bottom_left }}</p>
	</div>
	<div class="box bottom-right">
	<p>{{ $selectedItem->bottom_right_title }}</p>
	<p>{{ $selectedItem->bottom_right }}</p>

	</div>


	<script>
	// Center point of the circle and circle radius
	const center = {
	x: 50,
	y: 50
	};
	const radius = 355;
	// const point = [{35,78}];
	// Data for the scatter chart
	const data = {
	datasets: [{
	label: "Circle",
	data: [{
	x: center.x,
	y: center.y
	}],
	pointRadius: 355,
	pointHoverRadius: 355,
	pointBackgroundColor: "transparent",
	pointBorderColor: "black",
	borderWidth: 1
	},
	{
	label: "Circle2",
	data: [{
	x: center.x,
	y: center.y
	}],
	pointRadius: 194,
	pointHoverRadius: 194,
	pointBorderColor: "black",
	pointBackgroundColor: "transparent",
	borderWidth: 1,
	backgroundColor: "rgba(211, 200, 225, 0.8)"
	},
	{
	label: "Circle3",
	data: [{
	x: center.x,
	y: center.y
	}],
	pointRadius: 94,
	pointHoverRadius: 94,
	pointBorderColor: "black",
	borderWidth: 3,
	backgroundColor: "rgba(211, 200, 225, 0.8)"
	},
	{
	label: "point",
	data: [{x:45, y:75}],
	pointRadius: 3,
	pointBorderColor: "indianred",
	borderWidth: 10,
	backgroundColor: "indianred"
	}
	]
	};

	// Options for the scatter chart
	const options = {
	responsive: true,
	maintainAspectRatio: false,
	aspectRatio: 1,
	scales: {
	x: {
	type: "linear",
	position: "center",
	min: 20,
	max: 80,
	ticks: {
	stepSize: 10
	},
	grid: {
	drawOnChartArea: false
	}
	},
	y: {
	type: "linear",
	position: "center",
	min: 20,
	max: 80,
	ticks: {
	stepSize: 10
	},
	grid: {
	drawOnChartArea: false
	}
	}
	},
	plugins: {
	legend: {
	display: false
	},
	tooltip: {
	mode: 'nearest',
	intersect: false,
	enabled: true,
	filter: (tooltipItem) => {
	return tooltipItem.datasetIndex === 3; // Only show tooltip for the point dataset
	},
	}
	}
	};

	// Create the scatter chart
	const ctx = document.getElementById("myChart").getContext("2d");
	const chart = new Chart(ctx, {
	type: "scatter",
	data: data,
	options: options
	});
	</script>
	</body>

	</html>