custom-charts-in-popups.html

<div id='data-popup'>
    <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 {
        width: 220px;
    }

    h3 {
        margin: 0;
    }

    #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;
        display: inline-block;
        vertical-align: top;


    }

    @media(max-width: 400px) {
        .flourish-popup-content {
            transform: scale(1);
        }
    }
</style>