Interactive Charts with JavaScript Get Certified

Making a chart interactive means answering one question: “Which part of the chart is the mouse currently over?” This is called hit-testing. Once you know the answer, you can show tooltips, highlight bars, or select items.

Hit-Testing Bars

Hit-testing answers: is the mouse over a bar? For a bar chart it is a rectangle check. In this lesson the examples use made-up mouse positions so the results are the same every time; the last example is fully live.

What this code does: Draws a bar chart and checks whether a simulated mouse position (280, 100) is inside any bar. The text output lists the rectangle of every bar and whether the mouse hit it (only Thu does), then names the hovered bar. The picture shows the chart with the hovered bar in a lighter blue and a pink crosshair where the mouse is.

const canvas = document.createElement("canvas");
canvas.width = 480;
canvas.height = 280;
const ctx = canvas.getContext("2d");

const data = [
    { label: "Mon", value: 40 },
    { label: "Tue", value: 65 },
    { label: "Wed", value: 50 },
    { label: "Thu", value: 80 },
    { label: "Fri", value: 55 }
];

const max = Math.max(...data.map(d => d.value));
const barWidth = 50;
const gap = 25;
const startX = 40;
const baseY = 220;

// Turn every data item into a rectangle (x, y, width, height)
function getBars() {
    return data.map((d, i) => {
        const height = (d.value / max) * 170;
        const x = startX + i * (barWidth + gap);
        return { ...d, x, y: baseY - height, width: barWidth, height };
    });
}

// Hit-test: is the point (px, py) inside the rectangle of this bar?
function pointInRect(px, py, bar) {
    return px >= bar.x && px <= bar.x + bar.width &&
           py >= bar.y && py <= bar.y + bar.height;
}

function draw(highlightLabel = null, mouse = null) {
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    getBars().forEach(bar => {
        ctx.fillStyle = bar.label === highlightLabel ? "#60a5fa" : "#3b82f6";
        ctx.fillRect(bar.x, bar.y, bar.width, bar.height);

        ctx.fillStyle = "#1e293b";
        ctx.font = "13px Arial";
        ctx.textAlign = "center";
        ctx.fillText(bar.label, bar.x + bar.width / 2, baseY + 20);
    });

    if (mouse) drawMouse(ctx, mouse.x, mouse.y);
}

// Simulate mouse over "Thu"
const mouse = { x: 280, y: 100 };
const bars = getBars();
const hovered = bars.find(b => pointInRect(mouse.x, mouse.y, b));

bars.forEach(b => {
    console.log(b.label + ": x " + b.x + " to " + (b.x + b.width) + ", y " + b.y.toFixed(0) + " to " + (b.y + b.height) + " -> " + (pointInRect(mouse.x, mouse.y, b) ? "HIT" : "miss"));
});

draw(hovered ? hovered.label : null, mouse);
console.log(hovered ? `Mouse is over: ${hovered.label} (${hovered.value})` : "No bar under cursor");
showCanvas("Simulated mouse at (280, 100): the hovered bar is lighter", canvas);

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function drawMouse(ctx, x, y) {
    ctx.save();
    ctx.strokeStyle = "#d946ef";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(x, y, 7, 0, Math.PI * 2);
    ctx.moveTo(x - 12, y);
    ctx.lineTo(x + 12, y);
    ctx.moveTo(x, y - 12);
    ctx.lineTo(x, y + 12);
    ctx.stroke();
    ctx.restore();
}

Creates an in-memory canvas and gets its 2D context, ctx. The canvas size matters for hit-testing: mouse positions are measured in these canvas pixels.

Five days of values as objects with a label and a value. Chart code and hit-testing both start from this one array.

max is the largest value (80), used to scale heights. barWidth (50), gap (25), startX (40) and baseY (220) define the layout. Hit-testing only works if drawing and testing use exactly the same numbers, which is why both use getBars().

getBars() turns the data into rectangles. map() visits each item (d) with its position (i). The height scales the value: (value / max) x 170 pixels, so the biggest value gets the full 170 pixels. The x position moves right by one bar width plus one gap per item.

{ …d, … } copies the item’s label and value and adds x, y, width and height. y is baseY – height because canvas y grows downward and the bar stands on the baseline. Having the exact rectangle of every bar is what makes hit-testing possible.

A point is inside a rectangle only if all four conditions are true: it is not left of the left edge (px >= bar.x), not right of the right edge (px <= bar.x + bar.width), not above the top edge (py >= bar.y) and not below the bottom edge (py <= bar.y + bar.height). The && operators combine them. This is the core of hit-testing for bars.

draw takes the label of the bar to highlight and the mouse position to mark. Each time it runs it repaints the whole canvas white first, so the old picture is erased. Redrawing everything on each change is the normal way to make a canvas chart react.

The conditional operator picks a lighter blue for the highlighted bar and the normal blue for the others. Then the bar is painted from its rectangle.

Each day name is centred under its bar, 20 pixels below the baseline. The closing }); ends the loop.

If a mouse position was given, the helper draws a crosshair there. Without it you could not see where the simulated mouse is.

The mouse is placed at (280, 100). find() returns the first bar whose rectangle contains that point, or undefined if there is none.

Prints each bar’s rectangle and whether the mouse is inside it. Thu spans x 265 to 315 and y 50 to 220, and the mouse (280, 100) is inside both ranges, so it is the only HIT. The other bars fail the x test.

Draws the chart with the hovered bar highlighted (or none, if nothing was hit) and prints the result. The ternary ? : keeps the code safe when hovered is undefined.

Displays a snapshot of the chart below the text output.

Everything below this comment is support code that makes the example visible in the output. The lesson itself is the code above.

Not part of the lesson; it only makes the chart visible. showCanvas(label, source) creates a new canvas of the same size and copies the current picture into it with drawImage(). Because it is a snapshot, calling it after each step shows how the chart changed.

setTimeout(…, 0) waits until the text output has been printed, so the chart appears below it. A div with the class demo-canvas-box holds a caption and the snapshot and is added to the Console Output area (id previewContent). The demo- prefix keeps this class away from the tutorial page’s own styles.

The lesson uses made-up mouse positions, so this helper draws a pink crosshair at (x, y) to show where the ‘mouse’ is. save() and restore() make sure its colour and line width do not leak into the chart’s own drawing.

Showing a Tooltip

A tooltip is a small label that follows the hovered item. On a canvas it is simply a filled rectangle with text, drawn last so it sits on top of everything else.

What this code does: Finds the bar under a simulated mouse position (280, 90) and draws the chart with that bar highlighted and a dark tooltip above it showing ‘Thu: 80’. The tooltip’s width is measured from its text with measureText(), and it is kept inside the canvas edges. The pink crosshair marks the mouse and the text output reports the tooltip text.

const canvas = document.createElement("canvas");
canvas.width = 480;
canvas.height = 300;
const ctx = canvas.getContext("2d");

const data = [
    { label: "Mon", value: 40 },
    { label: "Tue", value: 65 },
    { label: "Wed", value: 50 },
    { label: "Thu", value: 80 },
    { label: "Fri", value: 55 }
];

const max = Math.max(...data.map(d => d.value));
const barWidth = 50;
const gap = 25;
const startX = 40;
const baseY = 230;

// Turn every data item into a rectangle (x, y, width, height)
function getBars() {
    return data.map((d, i) => {
        const height = (d.value / max) * 170;
        const x = startX + i * (barWidth + gap);
        return { ...d, x, y: baseY - height, width: barWidth, height };
    });
}

// Hit-test: is the point (px, py) inside the rectangle of this bar?
function pointInRect(px, py, bar) {
    return px >= bar.x && px <= bar.x + bar.width &&
           py >= bar.y && py <= bar.y + bar.height;
}

function drawTooltip(text, x, y) {
    ctx.font = "13px Arial";
    const padding = 8;
    const width = ctx.measureText(text).width + padding * 2;
    const height = 28;
    // Keep the tooltip inside the canvas
    const left = Math.max(4, Math.min(canvas.width - width - 4, x - width / 2));

    ctx.fillStyle = "#1e293b";
    ctx.fillRect(left, y - 40, width, height);

    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.fillText(text, left + width / 2, y - 21);
}

function draw(hovered, mouse) {
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    getBars().forEach(bar => {
        const isHovered = hovered && bar.label === hovered.label;
        ctx.fillStyle = isHovered ? "#60a5fa" : "#3b82f6";
        ctx.fillRect(bar.x, bar.y, bar.width, bar.height);

        ctx.fillStyle = "#1e293b";
        ctx.font = "13px Arial";
        ctx.textAlign = "center";
        ctx.fillText(bar.label, bar.x + bar.width / 2, baseY + 20);
    });

    if (hovered) {
        drawTooltip(`${hovered.label}: ${hovered.value}`, hovered.x + hovered.width / 2, hovered.y);
    }

    if (mouse) drawMouse(ctx, mouse.x, mouse.y);
}

const mouse = { x: 280, y: 90 };
const hovered = getBars().find(b => pointInRect(mouse.x, mouse.y, b));

draw(hovered, mouse);
console.log(hovered ? `Tooltip shown for ${hovered.label}` : "No tooltip");
if (hovered) console.log("Tooltip text:", hovered.label + ": " + hovered.value);
showCanvas("Tooltip above the hovered bar", canvas);

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function drawMouse(ctx, x, y) {
    ctx.save();
    ctx.strokeStyle = "#d946ef";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(x, y, 7, 0, Math.PI * 2);
    ctx.moveTo(x - 12, y);
    ctx.lineTo(x + 12, y);
    ctx.moveTo(x, y - 12);
    ctx.lineTo(x, y + 12);
    ctx.stroke();
    ctx.restore();
}

Creates an in-memory canvas and gets its 2D context, ctx. The canvas size matters for hit-testing: mouse positions are measured in these canvas pixels.

Five days of values as objects with a label and a value. Chart code and hit-testing both start from this one array.

The same scale and layout as before, with the baseline moved down to y = 230 to leave room above the tallest bar for the tooltip.

drawTooltip(text, x, y) draws a label above the point (x, y). The font must be set first because measureText(text).width depends on it. The box is the text width plus 8 pixels of padding on each side and 28 pixels high, so it always fits its text.

Centring the box on x means left = x – width / 2. Math.min stops it going past the right edge and Math.max stops it going past the left edge (with a 4 pixel margin). Without this, a tooltip for the first or last bar could be cut off.

A dark rectangle 40 pixels above the point, i.e. above the top of the bar.

White text, centred on the middle of the box (left + width / 2), placed so it sits in the middle of the 28 pixel height.

draw receives the hovered bar (or undefined) and the mouse position. It repaints the whole canvas white first.

Each bar is compared with the hovered bar by its label. (The earlier version compared the objects themselves with ===, which never matched, because getBars() builds new objects on every call. Comparing a stable value such as the label fixes that.)

Day names under the bars, then the end of the loop.

The tooltip is drawn after all the bars, so it appears on top. It is centred on the hovered bar (hovered.x + hovered.width / 2) and anchored at its top (hovered.y). The template string builds the text ‘Thu: 80’.

Draws the pink crosshair where the simulated mouse is.

The mouse at (280, 90) is inside the Thu bar, which spans y 60 to 230. The test reuses pointInRect, so the rule is written only once.

Draws the chart with the tooltip and prints which bar has one.

Prints exactly what the tooltip says: Thu: 80.

Displays a snapshot of the chart, with the tooltip, below the text output.

Everything below this comment is support code that makes the example visible in the output. The lesson itself is the code above.

Click-to-Select

Hover is temporary, selection is remembered. To select, you store the chosen item in a variable and draw it differently until something else is clicked.

What this code does: Simulates three clicks and shows the chart after each one. A click on Thu selects it (orange outline), a click on Tue moves the selection to Tue, and a click on empty space clears it. The selection is kept in the variable selected, and handleClick() updates it and redraws. The text output describes each click and the chart after each click is shown below it.

const canvas = document.createElement("canvas");
canvas.width = 480;
canvas.height = 280;
const ctx = canvas.getContext("2d");

const data = [
    { label: "Mon", value: 40 },
    { label: "Tue", value: 65 },
    { label: "Wed", value: 50 },
    { label: "Thu", value: 80 },
    { label: "Fri", value: 55 }
];

let selected = null;

const max = Math.max(...data.map(d => d.value));
const barWidth = 50;
const gap = 25;
const startX = 40;
const baseY = 220;

// Turn every data item into a rectangle (x, y, width, height)
function getBars() {
    return data.map((d, i) => {
        const height = (d.value / max) * 170;
        const x = startX + i * (barWidth + gap);
        return { ...d, x, y: baseY - height, width: barWidth, height };
    });
}

// Hit-test: is the point (px, py) inside the rectangle of this bar?
function pointInRect(px, py, bar) {
    return px >= bar.x && px <= bar.x + bar.width &&
           py >= bar.y && py <= bar.y + bar.height;
}

function draw(mouse) {
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    getBars().forEach(bar => {
        ctx.fillStyle = "#3b82f6";
        ctx.fillRect(bar.x, bar.y, bar.width, bar.height);

        if (bar.label === selected) {
            ctx.strokeStyle = "#f97316";
            ctx.lineWidth = 4;
            ctx.strokeRect(bar.x - 2, bar.y - 2, bar.width + 4, bar.height + 4);
        }

        ctx.fillStyle = "#1e293b";
        ctx.font = "13px Arial";
        ctx.textAlign = "center";
        ctx.fillText(bar.label, bar.x + bar.width / 2, baseY + 20);
    });

    if (mouse) drawMouse(ctx, mouse.x, mouse.y);
}

// What happens when the user clicks at (mx, my)
function handleClick(mx, my) {
    const hit = getBars().find(b => pointInRect(mx, my, b));
    selected = hit ? hit.label : null;
    console.log("Click at (" + mx + ", " + my + ") -> " + (selected ? "Selected: " + selected : "Selection cleared"));
    draw({ x: mx, y: my });
    showCanvas(selected ? "Selected: " + selected : "Selection cleared", canvas);
}

handleClick(280, 100);   // click on Thu
handleClick(140, 150);   // click on Tue: the selection moves
handleClick(20, 30);     // click on empty space: selection cleared

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function drawMouse(ctx, x, y) {
    ctx.save();
    ctx.strokeStyle = "#d946ef";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(x, y, 7, 0, Math.PI * 2);
    ctx.moveTo(x - 12, y);
    ctx.lineTo(x + 12, y);
    ctx.moveTo(x, y - 12);
    ctx.lineTo(x, y + 12);
    ctx.stroke();
    ctx.restore();
}

Creates an in-memory canvas and gets its 2D context, ctx. The canvas size matters for hit-testing: mouse positions are measured in these canvas pixels.

Five days of values as objects with a label and a value. Chart code and hit-testing both start from this one array.

selected remembers which bar is chosen (null means none). It lives outside draw(), so it survives between redraws. This is the difference from hover, which only exists while the mouse is over a bar.

The scale and layout, as in the first example.

Repaints the canvas white. draw() reads the current value of selected each time, so calling it again is all that is needed to update the picture.

Every bar is painted in the normal blue; the selection is shown separately, as an outline.

Only the selected bar gets a thick orange outline. strokeRect is drawn 2 pixels outside the bar on each side (x – 2, y – 2, width + 4, height + 4), so the 4 pixel line surrounds the bar instead of covering its edge.

Day names under the bars, then the end of the loop.

Draws the pink crosshair where the simulated click happened.

handleClick(mx, my) is what a real click listener would do with the click position. It searches for the bar under the point, using the same pointInRect test.

If a bar was hit, selected becomes its label; otherwise it becomes null, which clears the selection (this is what clicking empty space does). The log line describes the click and the result.

After the state changes, the chart is redrawn and a snapshot is shown, so each click produces its own picture.

A click inside Thu (x 265 to 315) selects it. A click at (140, 150) is inside Tue and moves the selection. (20, 30) is left of all bars, so nothing is hit and the selection is cleared.

Everything below this comment is support code that makes the example visible in the output. The lesson itself is the code above.

Nearest Point on a Line Chart

Dots on a line chart are tiny, so asking whether the mouse is exactly inside one is too strict. Instead, find the point that is closest to the mouse. The distance between two points is Math.hypot(dx, dy).

What this code does: Draws a line chart of seven values and finds the data point nearest to a simulated mouse position (220, 100). The text output lists the distance from the mouse to every point, so you can check that the winner really is the closest. The picture shows the line, the nearest point enlarged in orange, and a dashed line from the mouse to that point.

const canvas = document.createElement("canvas");
canvas.width = 480;
canvas.height = 280;
const ctx = canvas.getContext("2d");

const values = [12, 25, 18, 32, 28, 40, 35];
const max = Math.max(...values);
const startX = 40;
const stepX = 60;
const baseY = 220;

function getPoints() {
    return values.map((v, i) => ({
        value: v,
        x: startX + i * stepX,
        y: baseY - (v / max) * 170
    }));
}

function findNearest(points, px, py) {
    let nearest = null;
    let minDist = Infinity;

    points.forEach(p => {
        const dist = Math.hypot(p.x - px, p.y - py);
        if (dist < minDist) {
            minDist = dist;
            nearest = p;
        }
    });
    return nearest;
}

function draw(points, highlighted, mouse) {
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw line
    ctx.beginPath();
    points.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
    ctx.strokeStyle = "#0ea5e9";
    ctx.lineWidth = 3;
    ctx.stroke();

    // Dashed line from the mouse to the nearest point
    if (mouse && highlighted) {
        ctx.setLineDash([5, 4]);
        ctx.strokeStyle = "#d946ef";
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);
        ctx.lineTo(highlighted.x, highlighted.y);
        ctx.stroke();
        ctx.setLineDash([]);
    }

    // Draw points
    points.forEach(p => {
        const isHi = p === highlighted;
        ctx.beginPath();
        ctx.arc(p.x, p.y, isHi ? 8 : 5, 0, Math.PI * 2);
        ctx.fillStyle = isHi ? "#f97316" : "#0369a1";
        ctx.fill();
    });

    if (mouse) drawMouse(ctx, mouse.x, mouse.y);
}

const points = getPoints();
const mouse = { x: 220, y: 100 };

points.forEach(p => {
    console.log("Point " + p.value + " at (" + p.x + ", " + p.y.toFixed(0) + "): distance " + Math.hypot(p.x - mouse.x, p.y - mouse.y).toFixed(1) + "px");
});

const nearest = findNearest(points, mouse.x, mouse.y);

draw(points, nearest, mouse);
console.log("Nearest point value:", nearest.value);
showCanvas("The nearest point to the mouse is highlighted", canvas);

// ===== Helpers below are not part of the lesson =====
function showCanvas(label, source) {
    const copy = document.createElement("canvas");
    copy.width = source.width;
    copy.height = source.height;
    copy.getContext("2d").drawImage(source, 0, 0);
    copy.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(copy);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
}

function drawMouse(ctx, x, y) {
    ctx.save();
    ctx.strokeStyle = "#d946ef";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(x, y, 7, 0, Math.PI * 2);
    ctx.moveTo(x - 12, y);
    ctx.lineTo(x + 12, y);
    ctx.moveTo(x, y - 12);
    ctx.lineTo(x, y + 12);
    ctx.stroke();
    ctx.restore();
}

Creates an in-memory canvas and gets its 2D context, ctx. The canvas size matters for hit-testing: mouse positions are measured in these canvas pixels.

Seven values, scaled by the largest (40). startX and stepX place the points 60 pixels apart, and baseY (220) is the zero line.

Each value becomes a point object with its value and its canvas position. y = baseY – (v / max) x 170 is the same scaling as for bars (higher value, smaller y). The parentheses after => make map return an object.

findNearest(points, px, py) searches for the point closest to (px, py). nearest starts as null, and minDist starts as Infinity, so the first point checked is always closer than it.

Math.hypot(dx, dy) is the straight-line distance (Pythagoras): the square root of dx squared plus dy squared. If this point is closer than the best so far, it becomes the new nearest and minDist is updated. After the loop, nearest is the closest one.

Returns the closest point object, so the caller can read its value and position.

draw now receives the points, the highlighted point and the mouse. The points are passed in, rather than rebuilt inside draw, so the highlighted point is the very same object as in the list.

Moves to the first point and draws a line to each later one. The ternary i === 0 ? moveTo : lineTo is a compact way to start the path and then extend it.

Only when there is a mouse position and a nearest point. setLineDash([5, 4]) makes the following lines dashed: 5 pixels drawn, 4 pixels gap.

Draws a thin pink line from the mouse to the nearest point, which makes the distance visible. setLineDash([]) switches back to solid lines for the rest of the drawing.

p === highlighted compares the objects. This works because both come from the same points array. (The earlier version rebuilt the points inside draw, so the objects were different and nothing was ever highlighted.)

Each point is a circle. The highlighted one is larger (radius 8) and orange; the others are radius 5 and dark blue.

Draws the pink crosshair at the simulated mouse position.

The points are built once and reused. The simulated mouse is at (220, 100).

Prints the distance from the mouse to each point. The point (220, 84) is only 16 pixels away; the next closest, (280, 101), is 60 pixels away. The list shows that the winner is really the nearest.

Finds the nearest point (value 32), draws the chart with it highlighted and prints its value. A real chart often adds a maximum distance (for example 30 pixels) so that nothing is highlighted when the mouse is far from every point.

Displays a snapshot of the chart below the text output.

Everything below this comment is support code that makes the example visible in the output. The lesson itself is the code above.

Practice: Full Interactive Bar Chart

Now everything is live: hover highlights and shows a tooltip, a click selects, and leaving the chart removes the hover. Hover and selection are two separate pieces of state.

What this code does: Builds a complete interactive bar chart and puts the real canvas in the output, so you can use it with your mouse: move over a bar for a highlight and tooltip, click to select it (orange outline), and click empty space to clear the selection. A status line under the chart reports what is happening. The code starts in a simulated state (hovering Wed, Thu selected) and the text output explains it. Mouse positions are converted from the browser page to canvas pixels by toCanvasCoords().

const canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 300;
const ctx = canvas.getContext("2d");

const data = [
    { label: "Mon", value: 42 },
    { label: "Tue", value: 68 },
    { label: "Wed", value: 55 },
    { label: "Thu", value: 90 },
    { label: "Fri", value: 75 }
];

let selected = "Thu";   // already selected for demo
let hoveredLabel = null;

const max = Math.max(...data.map(d => d.value));
const barWidth = 55;
const gap = 22;
const startX = 40;
const baseY = 230;

function getBars() {
    return data.map((d, i) => {
        const height = (d.value / max) * 170;
        const x = startX + i * (barWidth + gap);
        return { ...d, x, y: baseY - height, width: barWidth, height };
    });
}

function barAt(x, y) {
    return getBars().find(b => x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height);
}

// Browser mouse coordinates -> canvas coordinates
function toCanvasCoords(event) {
    const rect = canvas.getBoundingClientRect();
    return {
        x: (event.clientX - rect.left) * (canvas.width / rect.width),
        y: (event.clientY - rect.top) * (canvas.height / rect.height)
    };
}

function draw() {
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    getBars().forEach(bar => {
        // Bar color
        ctx.fillStyle = bar.label === hoveredLabel ? "#60a5fa" : "#3b82f6";
        ctx.fillRect(bar.x, bar.y, bar.width, bar.height);

        // Selection outline
        if (bar.label === selected) {
            ctx.strokeStyle = "#f97316";
            ctx.lineWidth = 4;
            ctx.strokeRect(bar.x - 2, bar.y - 2, bar.width + 4, bar.height + 4);
        }

        // Label
        ctx.fillStyle = "#1e293b";
        ctx.font = "13px Arial";
        ctx.textAlign = "center";
        ctx.fillText(bar.label, bar.x + bar.width / 2, baseY + 20);
    });

    // Tooltip
    const hovered = getBars().find(b => b.label === hoveredLabel);
    if (hovered) {
        const text = `${hovered.label}: ${hovered.value}`;
        ctx.font = "13px Arial";
        ctx.textAlign = "center";
        const w = ctx.measureText(text).width + 16;
        const cx = hovered.x + hovered.width / 2;
        ctx.fillStyle = "#1e293b";
        ctx.fillRect(cx - w / 2, hovered.y - 38, w, 28);
        ctx.fillStyle = "#ffffff";
        ctx.fillText(text, cx, hovered.y - 19);
    }
}

// Put the REAL canvas in the output so the mouse works on it
const status = showLive("Interactive chart: hover a bar, click to select", canvas);

canvas.addEventListener("mousemove", (event) => {
    const p = toCanvasCoords(event);
    const bar = barAt(p.x, p.y);
    hoveredLabel = bar ? bar.label : null;
    canvas.style.cursor = bar ? "pointer" : "default";
    status.textContent = bar ? "Hovering " + bar.label + " (" + bar.value + ")" : "Not over a bar";
    draw();
});

canvas.addEventListener("click", (event) => {
    const p = toCanvasCoords(event);
    const bar = barAt(p.x, p.y);
    selected = bar ? bar.label : null;
    status.textContent = selected ? "Selected " + selected : "Selection cleared";
    draw();
});

canvas.addEventListener("mouseleave", () => {
    hoveredLabel = null;
    status.textContent = "Mouse left the chart";
    draw();
});

// Initial state: simulated hover over "Wed", Thu already selected
hoveredLabel = "Wed";
draw();
status.textContent = "Hovering Wed (55), Thu is selected";
console.log("Initial state: hovering Wed, selected Thu");
console.log("Hover and selection are two separate pieces of state");
console.log("Now try it on the chart below: move the mouse over the bars and click.");

// ===== Helpers below are not part of the lesson =====
function showLive(label, canvas) {
    const status = document.createElement("div");
    status.className = "demo-status";
    status.style.cssText = "font:13px monospace;color:#334155;margin-top:6px;";
    status.textContent = "Move the mouse over the chart";
    canvas.style.maxWidth = "100%";
    setTimeout(() => {
        const box = document.createElement("div");
        box.className = "demo-canvas-box";
        box.innerHTML = "<p class='demo-canvas-label'>" + label + "</p>";
        box.appendChild(canvas);
        box.appendChild(status);
        document.getElementById("previewContent").appendChild(box);
    }, 0);
    return status;
}

Creates an in-memory canvas and gets its 2D context, ctx. The canvas size matters for hit-testing: mouse positions are measured in these canvas pixels.

Five values as objects with a label and a value.

selected is the clicked bar (Thu to start) and hoveredLabel is the bar under the mouse (none to start). They are separate on purpose: the mouse can hover over Wed while Thu stays selected, and clicking changes one without touching the other.

The largest value scales the heights, and the other constants define the layout.

Turns each data item into a rectangle (x, y, width, height), using the same scaling as the earlier examples.

Returns the bar whose rectangle contains the point (x, y), or undefined. It is the hit-test from the first example in a reusable function.

A mouse event gives positions relative to the browser window (clientX, clientY). getBoundingClientRect() returns where the canvas currently is on the screen and how big it appears.

Subtracting rect.left and rect.top gives the position inside the canvas. Multiplying by canvas.width / rect.width converts from displayed pixels to canvas pixels; if the canvas is shown smaller than its real size (for example max-width: 100% on a small screen) the numbers would otherwise be wrong. Without this conversion, hit-testing breaks as soon as the canvas is scaled.

draw() paints the whole chart from the current state (selected and hoveredLabel). Changing the state and calling draw() again is how the chart reacts.

The hovered bar is lighter blue; the others are normal blue.

The selected bar gets an orange outline, independent of the hover colour.

Day names under the bars, then the end of the loop.

Looks up the rectangle of the bar named in hoveredLabel. It is compared by label, so it works even though getBars() builds new objects each time.

If a bar is hovered, a dark box with white text is drawn above it, centred on the bar (cx). measureText gives the text width, so the box fits the text. It is drawn last, so it is on top. The final } ends draw().

showLive() puts this real canvas in the output panel (so mouse events work on it) and returns a status line that the handlers can write to.

Runs every time the mouse moves over the canvas. It converts the position, finds the bar under it, stores its label in hoveredLabel (null if none), switches the cursor to a pointer over a bar, updates the status text and redraws.

Runs on a click. It finds the bar under the click and stores its label in selected; clicking empty space sets it to null, which clears the selection. Then it updates the status and redraws.

Runs when the mouse leaves the canvas. Without it, the last hovered bar would stay highlighted when you move away.

Sets the hover to Wed and draws once, so the chart starts with Wed highlighted (with its tooltip) and Thu outlined.

Shows the starting state in the status line.

Only what is logged while the code runs appears in the Console Output text. Messages from event handlers, which run later, would not, which is why the handlers write to the status line instead. The last line invites you to try the chart yourself.

Everything below this comment is support code that makes the example visible in the output. The lesson itself is the code above.

Not part of the lesson. showLive() creates a small text line (class demo-status) that your event handlers can update. Messages sent with console.log after the run would not appear in the Console Output panel, so the status line is how the live chart reports what is happening.

Unlike showCanvas(), this adds the REAL canvas (not a copy) to the Console Output area, together with the status line. Mouse events only work on a canvas that is actually on the page, which is why the live example needs this.

Returns the status element so the lesson code can write messages into it.

Quick Summary

Hit-testing = checking if the mouse is inside a bar, slice, or near a point.
Bars use simple rectangle checks.
Line charts use Math.hypot() to find the nearest point.
Tooltips are just a small filled rectangle + text, drawn last so they sit on top.
Mouse positions must be converted to canvas pixels with getBoundingClientRect().
Keep hover and selection as two separate pieces of state, and compare items by a stable value (such as a label), not by object identity.

Tip: Click “Test My Code” on the last example and use the chart with your mouse: hover for the tooltip, click to select, click empty space to clear.

🧪 Test Your JavaScript Code

Edit the code on the left and click “Run Code” to see the console output on the right.

📝 JavaScript Code

👁 Console Output

Click “Run Code” to see the output here.

Ctrl + Enter to run code Esc to close