implementing a graph which overlays a image whenever we hover over the coordinates

Question

Hey Hi, I'm a student and I'm learning about javascript and PHP. I'm trying to implement a graph which shows images when I hover my mouse over the graph. To be exact whenever I click on or hover over a particular coordinate I want the images to be displayed on the page. Is there a way to do it? If so can you help me with that,please?

Answer 1

There are two main ways to implement a graph which overlays an image whenever we hover over the coordinates:

1) Using a chart library

This would be the easiest and most efficient approach. Libraries like Chart.js, ApexCharts, Highcharts, Plotly let you detect hovered points and show custom content.

For each graph point you can store:

1. x value
2. y value
3. image URL
4. option title / description

Then on hover, display the corresponding image

2) Using HTML canvas or SVG manually

You can draw the graph yourself and listen for mouse events like:

1. mousemove
2. click

Then check whether the mouse is close to a coordinate and show the image. This gives more control, but it is harder than using a chart library.

Answer 2

Hi Geetha,

There are many options for rendering a graph using Javascript and PHP. Some popular libraries include:

1. C3.js
2. Chart.js
3. Highcharts

Once you've chosen which library works best for you then you can check it's documentation for `tooltip`. In C3 for example, it's not as beginner friendly but its very customizable.

For Chart.js for example, you can pass `customTooltips` and replace the `innerHtml` with an `img` tag with the `src` being the image you want to overlay. You can programmatically change the image based upon the data that is passed into the argument of the `customTooltips` function.

Hope this helps.