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: "Adding Labels"
description: "We draw a label over each bar, showing the number of points within that bin."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/2y41rymuay
codeFolder: course/module_02/lesson_02.06/protected/code/03-making-a-bar-chart/end
---

# Adding Labels

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

Let's add labels to show the count for each of these bars.

We can keep our chart clean by only adding labels to bins with any relevant days — having `0`s in empty spaces is unhelpful visual clutter. We can identify which bins have no data by their lack of a bar, no need to call it out with a label.

d3 selections have a `.filter()` method that acts the same way the native Array method does. `.filter()` accepts one parameter: a function that accepts one data point and returns a value. Any items in our dataset who return a **falsey** value will be removed.

A>By "**falsey**", we're referring to any value that evaluates to `false`. Maybe surprisingly, this includes values other than `false`, such as `0`, `null`, `undefined`, `""`, and `NaN`. Keep in mind that empty arrays `[]` and object `{}` evaluate to **truthy**. If you're curious, [read more here](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).

We can use `yAccessor()` as shorthand for `d => yAccessor(d) != 0` because `0` is **falsey**.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1966 endLine=85 startChar=1921 startLine=85 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.06/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L85 }
const barText = binGroups.filter(yAccessor)
```

Since these labels are just text, we'll want to use the SVG `<text>` element we've been using for our axis labels.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1986 endLine=86 startChar=1921 startLine=85 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.06/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L85 }
const barText = binGroups.filter(yAccessor)
  .append("text")
```

Remember, `<text>` elements are positioned with **x** and **y** attributes. The label will be centered horizontally above the bar — we can find the center of the bar by adding half of the bar's width (_the right side minus the left side_) to the left side of the bar.

We draw a label over each bar, showing the number of points within that bin.