Pictorial Bar

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

<div class="skt-pbar-wrap pbar_1" style="width:100%;max-width:760px;margin:0 auto;font-family:inherit;"><div style="font-weight:600;margin:0 0 12px;font-size:16px;">Population of Largest U.S. Cities</div>
			    <div style="display:flex;align-items:center;gap:10px;margin:6px 0;">
			        <span style="flex:0 0 130px;text-align:right;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">New York City</span>
			        <div style="flex:1;"><svg width="100%" height="34" style="display:block;overflow:hidden;border-radius:4px;"><defs><pattern id="pbar_1_g0" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="0.18"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="0.18"/></g></pattern><pattern id="pbar_1_f0" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="1"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="1"/></g></pattern></defs><rect x="0" y="0" width="100%" height="34" fill="url(#pbar_1_g0)"/><rect x="0" y="0" width="90.833333333333%" height="34" fill="url(#pbar_1_f0)"/></svg></div><span style="flex:0 0 56px;font-size:13px;color:#444;">8,175,000</span></div>
			    <div style="display:flex;align-items:center;gap:10px;margin:6px 0;">
			        <span style="flex:0 0 130px;text-align:right;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Los Angeles</span>
			        <div style="flex:1;"><svg width="100%" height="34" style="display:block;overflow:hidden;border-radius:4px;"><defs><pattern id="pbar_1_g1" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="0.18"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="0.18"/></g></pattern><pattern id="pbar_1_f1" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="1"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="1"/></g></pattern></defs><rect x="0" y="0" width="100%" height="34" fill="url(#pbar_1_g1)"/><rect x="0" y="0" width="42.133333333333%" height="34" fill="url(#pbar_1_f1)"/></svg></div><span style="flex:0 0 56px;font-size:13px;color:#444;">3,792,000</span></div>
			    <div style="display:flex;align-items:center;gap:10px;margin:6px 0;">
			        <span style="flex:0 0 130px;text-align:right;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Chicago</span>
			        <div style="flex:1;"><svg width="100%" height="34" style="display:block;overflow:hidden;border-radius:4px;"><defs><pattern id="pbar_1_g2" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="0.18"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="0.18"/></g></pattern><pattern id="pbar_1_f2" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="1"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="1"/></g></pattern></defs><rect x="0" y="0" width="100%" height="34" fill="url(#pbar_1_g2)"/><rect x="0" y="0" width="29.944444444444%" height="34" fill="url(#pbar_1_f2)"/></svg></div><span style="flex:0 0 56px;font-size:13px;color:#444;">2,695,000</span></div>
			    <div style="display:flex;align-items:center;gap:10px;margin:6px 0;">
			        <span style="flex:0 0 130px;text-align:right;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Houston</span>
			        <div style="flex:1;"><svg width="100%" height="34" style="display:block;overflow:hidden;border-radius:4px;"><defs><pattern id="pbar_1_g3" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="0.18"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="0.18"/></g></pattern><pattern id="pbar_1_f3" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="1"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="1"/></g></pattern></defs><rect x="0" y="0" width="100%" height="34" fill="url(#pbar_1_g3)"/><rect x="0" y="0" width="23.322222222222%" height="34" fill="url(#pbar_1_f3)"/></svg></div><span style="flex:0 0 56px;font-size:13px;color:#444;">2,099,000</span></div>
			    <div style="display:flex;align-items:center;gap:10px;margin:6px 0;">
			        <span style="flex:0 0 130px;text-align:right;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Philadelphia</span>
			        <div style="flex:1;"><svg width="100%" height="34" style="display:block;overflow:hidden;border-radius:4px;"><defs><pattern id="pbar_1_g4" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="0.18"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="0.18"/></g></pattern><pattern id="pbar_1_f4" width="22" height="34" patternUnits="userSpaceOnUse"><g transform="translate(1,2)"><circle cx="10" cy="7" r="5" fill="#fcba03" fill-opacity="1"/><path d="M2 28c0-5 3.6-9 8-9s8 4 8 9z" fill="#fcba03" fill-opacity="1"/></g></pattern></defs><rect x="0" y="0" width="100%" height="34" fill="url(#pbar_1_g4)"/><rect x="0" y="0" width="16.955555555556%" height="34" fill="url(#pbar_1_f4)"/></svg></div><span style="flex:0 0 56px;font-size:13px;color:#444;">1,526,000</span></div>
				<div style="font-weight:600;margin:40px 0 12px;font-size:16px;display:flex;align-items:center;gap:6px;text-align:center; justify-content: flex-end;">
				    <span>360000 =</span><span><svg width="100%" height="34" style="display:block;overflow:hidden;border-radius:4px;"><rect x="0" y="0" width="8%" height="34" fill="url(#pbar_1_g4)"/><rect x="0" y="0" width="8%" height="34" fill="url(#pbar_1_f4)"/></svg></span>
			</div></div>

[skillwrapper type="skt_pictorialbar" chart_title="Population of Largest U.S. Cities" icon_color="#fcba03" max="9000000"]

[skill label="New York City" value="8175000"]

[skill label="Los Angeles" value="3792000"]

[skill label="Chicago" value="2695000"]

[skill label="Houston" value="2099000"]

[skill label="Philadelphia" value="1526000"]

[/skillwrapper]

Population of Largest U.S. Cities

New York City

8,175,000

Los Angeles

3,792,000

Chicago

2,695,000

Houston

2,099,000

Philadelphia

1,526,000

360000 =