How to hide popups for a certain series in the Line, bar, pie template

Sometimes, you might only want to have popups display on one series but not another. With just a bit of custom HTML, this is possible. Here's how.

In our example, we're using a dataset with two columns, "A" and "B". Column A is used to draw the line while column B is used to draw the columns. In this tutorial, we're going to look at how to display popup content only for column A. It's also possible to do this the other way around, or with more than two columns.

1

After making sure your columns have been added to the "Info for custom popups" column binding (see screenshot above), go to the popups settings and select "Custom content"

2

Write the popup content you'd like to display, along with any prefixes and suffixes that might be needed. In our example, column A is the GDP in USD, so we're going to add that as a prefix. Remember that everything wrapped in curly brackets can be accessed from the data tab. (Looking for a more general overview of how custom popups work in the Line, bar and pie template? We've got you.)

3

Next, we're going to wrap our entire popup content in a div and give it a class of "{{SERIES}}". This mean that the class of everything in our popup will be the same of the name of our series, so A or B.

4

Finally, we're going to add a style to hide series B. We can do this by setting the contents of the class B to display: none.

Here's that same code for you to copy: 

<div class="{{SERIES}}">GDP in USD: ${{A}}</div>
<br>
<style> 
<br>
.B{display: none;} 
<br>
</style>
	

5

That's it! 🎉 Remember that you can do this for any series by accessing the series name as a class. Note that series names have to be one word, but you can work around that by adding non-breaking spaces to your column headers. More on that in this help doc.