How to colour your text by series in custom Line, bar pie popups

This help doc will walk you through styling your text by a certain series in Line, bar pie popups. If you're looking for a more general overview of custom popups in the Line, bar pie template, you might want to read this help doc first.

For starters, let's look at the difference between auto popups and custom popups in the Line, bar pie template.

When using the auto popup option, the title will always be the name of the series, followed by the value. It will be displayed in the colour of the series. Here's what this will look like:

Our custom popups, on the other hand, will allow you to pull through both information on the currently focussed data point and its series. This is handy when you want to add information only on a certain series, or pull through other information or images from your data tab. Custom popups don't pull through the colour of the series by default. Here's an example of custom popups:

Luckily, with a bit of a workaround, we can get our series names to display in the colour of their series, too. This tutorial will walk you through exactly that.

1

In the custom popup code area, wrap your series name in a <div> with a class called {{SERIES}}. We're doing this so we can specify the colour of the series later.



Here's what the code should look like:

<div class="{{SERIES}}"><b>{{SERIES}}</b></div>
		

This will write the name of your series and give it a CSS class with the same name. As we haven't yet specified any styles for that class, it won't look changed yet.

2

Note: This step is only needed if your series names currently have a space in them. If they only consist of one word, you can skip to step 3.

As the name of your series is now serving as your class and classes aren't allowed to have blank spaces, we'll have to make sure that it doesn't have any spaces. We can either do this by giving our series different names (for example "Group1" instead of "Group 1"), or by using non-breaking whitespaces. These are spaces that look like a normal blank space, but are actually an invisible character. To add non-breaking whitespaces, press Ctrl+Shift+Spacebar (Windows) or Option+Spacebar (Mac). We're going to go ahead and use non-breaking white spaces because we'd like to keep the visible space in our example.



3

Now it's time to add some styling! To do this, add a <style> section to the bottom of your custom popup code and start specifying the names of the different series names (to make sure you don't accidentally type spaces, it's easiest to just copy-paste them over from the data tab if you're using non-breaking whitespaces).



Here's what the code from our example looks like:




<style><br>.Group 1{<br>color: #5f4690;}<br>.Group 2{<br>color: #1d6996}<br>.Group 3{<br>color: #38a6a5;}<br>.Group 4{<br>color: #0f8554;}
</style>
		

5

That's it! Here's what our visualization looks like now:

Here's the complete code from our example above for you to copy and reuse:

<div style="width:230px;">
<div class="{{SERIES}}"><b>{{SERIES}}</b></div>
<img src="{{image}}"/></br>
<b>Value: </b>{{VALUE}}</br>
<b>Quote:</b>
{{Info}}
</div>

<style>
.Group 1{
color: #5f4690;}
.Group 2{
color: #1d6996}
.Group 3{
color: #38a6a5;}
.Group 4{
color: #0f8554;}
</style>