Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Line chart"
description: "Lastly, we add a tooltip to our timeline. We talk about how to add a listener rectangle, d3.leastIndex(), and how to add a dot to mark our place."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/lnk6osj7zn
codeFolder: course/module_04/lesson_04.05/protected/code/05-interactions/end
---

# Line chart

Let's go through one last example for adding tooltips. So far, we've added tooltips to individual elements (bars, circles, and paths). Adding a tooltip to a timeline is a bit different.

In this section, we're aiming to add a tooltip to our line chart like this:

![timeline](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_04/lesson_04.05/public/images/5-interactions/timeline-tooltip.png)

Instead of catching hover events for individual elements, we want to display a tooltip whenever a user is hovering **anywhere on the chart**. Therefore, we'll want an element that spans our entire **bounds**.

<CodeSandboxEmbed
  src="//codesandbox.io/s/g44be?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

To start coding up our **Set up interactions** step, let's create a `<rect>` that covers our **bounds** and add our mouse event listeners to it. This time we'll want to listen for `mousemove` events instead of `mouseenter` events because we'll want to update the tooltip's position when a reader moves their mouse around the chart.

A>Note that we don't need to define our `<rect>`'s `x` or `y` attributes because they both default to `0`.

```javascript
const listeningRect = bounds.append("rect")
    .attr("class", "listening-rect")
    .attr("width", dimensions.boundedWidth)
    .attr("height", dimensions.boundedHeight)
    .on("mousemove", onMouseMove)
    .on("mouseleave", onMouseLeave)
```

Perfect! We can see that our `listeningRect`, defaulted to a black fill, covers our entire bounds.

![timeline listening rect](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_04/lesson_04.05/public/images/5-interactions/timeline-listening-rect.png)

Let's add a rule to `styles.css` so we can see our chart again.

```css
.listening-rect {
    fill: transparent;
}
```

Great! Now we can set up our `tooltip` variable and `onMouseMove` and `onMouseLeave()` functions (back in our `line.js` file).

```javascript
const tooltip = d3.select("#tooltip")
function onMouseMove(event) {
}

function onMouseLeave() {
}
```

Let's start fleshing out `onMouseMove` — how will we know the location on our line that we are hovering over? The passed parameters we used previously (`datum`, `index`, and `nodes`) won't be helpful here, and `this` will just point us at the listener rect element.

When an event listener is invoked, the **d3-selection** library sets a global `d3.event`. `d3.event` will refer to the currently triggered event and will be reset when the event listener is done. During the event listener handler, we also get access to a `d3.mouse()` function which will return the `x`, `y` coordinates of the mouse event, relative to a specified container.

Let's see what that would look like in action and pass our listener container to `d3.mouse()`.

```javascript
function onMouseMove(event) {
    const mousePosition = d3.pointer(event)
    console.log(mousePosition)
```

Now we can see our mouse position as an `[x,y]` array when we move our mouse around the chart.

![mouse coordinates](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_04/lesson_04.05/public/images/5-interactions/timeline-mouse-coords.png)

Test it out — what do the numbers look like when you hover over the top left of the chart? What about the bottom right?

Great, but in order to show the tooltip next to an actual data point, we need to know which point we're closest to. First, we'll need to figure out what date we're hovering over — how do we convert an x position into a date? So far, we've only used our scales to convert from the data space (in this case, JavaScript date objects) to the pixel space.

Thankfully, d3 scales make this very simple! We can use the same `xScale()` we've used previously, which has an `.invert()` method. `.invert()` will convert our units backwards, from the `range` to the `domain`.

Let's pass the x position of our mouse (`mousePosition[0]`) to the `.invert()` method of our `xScale()`.

Lastly, we add a tooltip to our timeline. We talk about how to add a listener rectangle, d3.leastIndex(), and how to add a dot to mark our place.