How to add charts made with data from your data tab to your popups

This help doc covers adding custom polling results or charts made with data in your datasheet. If you'd like to read a more basic help doc on how to add images, videos and links to your popups, you can do that here.

Hover over the different areas to display the example.

To display charts made with data from your data tab in your popups,

1
In the Data tab, create new columns for the data you would like to visualize as charts in your popups and add them to the "Metadata for popups" binding in the "Select columns to visualise" panel. In our example, we're using the percentages at which US counties voted for which party. (Columns I-K in the below screenshot)

2
Next, Add custom HTML to your popups by selecting "Custom content" in the Regions layer settings. You can copy the custom HTML supplied below and tweak it to match your column names and colors. Remember that column names supplied in curly brackets ({{}}) refer back to the data tab and pull through data from that column. The way we draw the custom charts is by drawing a bar with the width of the value from the column. We're also supplying coloring information in one of our columns, as we will be using that to color the different headers.

3
The example above uses the following popup content:  
<div id='data-popup'>
<h3>{{County, State}}</h3>
<ul style='width: 140px;'>
<strong><span style='color:{{Colourwinning}}'>{{winningparty}}</span></strong><br><br>
<b>2016 vote share</b><br>
<li> <span class='party-name'>Dem</span> <span class='party-bar' style='width: {{voteDem2016_pct}}; background-color: #0f69ff;'></span> <span class='party-value' style='color: #0f69ff;'>{{voteDem2016_pct}}</span> </li>

<li> <span class='party-name'>Rep</span> <span class='party-bar' style='width: {{voteRep2016_pct}}; background-color: #eb0f29;'> </span> <span class='party-value' style='color:#eb0f29;'>{{voteRep2016_pct}}</span> </li>
<li> <span class='party-name'>Other</span> <span class='party-bar' style='width: {{voteOth2016_pct}}; background-color:#6e7780;'> </span> <span class='party-value' style='color:#6e7780;'>{{voteOth2016_pct}}</span> </li>
</ul>

</div>
<style>
#data-popup ul {
padding: 0; 
margin-bottom: 0; 
}
#data-popup li {
list-style: none;
padding: 0; 
margin-top: 4px; 
padding-left:40px; 
position: relative; 
width: 100px; 
white-space: nowrap;
}
#data-popup .party-name {
display: inline-block; 
width:75px; 
position: absolute; 
left:5px;
font-size: 12px; 
}
#data-popup .party-bar {
width: 0;
display: inline-block; 
vertical-align: top; 
height: 12px; 
}
#data-popup
 .party-value {
font-size: 11px;
 } 
@media(max-width: 400px) {
.flourish-popup-content {
transform: scale(1); 
} 
}
</style>
	
Note this example also has extra styles added for styling the popup on mobile. This is important to add when your popup text is overflowing the popup on mobile displays.