custom-charts-in-panel-percentage.html

<div id='data-panel'>
    <ul style='width: 100%;'>
        <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;'>&nbsp;</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;'>&nbsp;</span> <span class='party-value'
                style='color:#6e7780;'>{{voteOth2016_pct}}</span> </li>
    </ul>
</div>
<style>
    h3 {
        margin: 0;
    }

    #data-panel ul {
        padding: 0;
        margin-bottom: 0;
    }

    #data-panel li {
        list-style: none;
        padding: 0;
        margin-top: 4px;
        padding-left: 40px;
        position: relative;
        white-space: nowrap;
    }

    #data-panel .party-name {
        display: inline-block;
        position: absolute;
        left: 5px;
        font-size: 12px;
    }

    #data-panel .party-bar {
        width: 0;
        display: inline-block;
        vertical-align: top;
        height: 12px;
    }

    #data-panel .party-value {
        font-size: 11px;
        display: inline-block;
        vertical-align: top;
    }

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