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 be hidden on 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, go to the Popups & panels settings and select Custom popup and/or panel 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 contains GDP data 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.

You can have a look here for a more general overview of how custom popups work in the Line, bar and pie template.

To avoid visual artifacts for the series we do not want popups to be displayed, deactivate the Pointer and set Padding to zero.

3

Next, we're going to wrap our entire popup content in a div and give it a class of "{{SERIES}}".

 

 

This means that the class of everything in our popup will be the same of the name of our series, so A or B.

4

Next, we're going to add some simple code to display in the popup series A.

We use a conditional statement that displays content only for data living on column A.

 

To hide series B, and to style our popup, we will be using some CSS.

We can do this by setting the contents of the class B to display: none.

We also add some styling for the popup content.

Here's that same code for you to copy:

<div class="{{SERIES}} popup-content">

{{#if A}}
<b>{{Year}}:</b> ${{A}}
{{/if}}

</div>

<style>
.popup-content {
padding: 7px 7px 7px 7px; /* top, right, bottom, left */
}
.B {
display: none;
}
</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.