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.
- 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
-
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: ${{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.