Pyramid

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

<?php
echo 'Hello, world!';

<style>
			.py_1{font-family:inherit;max-width:820px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.py_1 .py-title{font-size:18px;font-weight:600;color:#222;margin:0 0 6px;text-align:center;}
			.py_1 svg{display:block;width:100%;height:auto;}
			.py_1 .py-bar{transition:filter .15s ease;cursor:default;}
			.py_1 .py-bar:hover{filter:brightness(1.1);}
			.py_1 .py-cat{font-size:11px;fill:#666;}
			.py_1 .py-val{font-size:10px;font-weight:600;fill:#666;}
			</style><div class="py_1"><div class="py-title">Urban vs Rural Population</div><svg viewBox="0 0 780 280" preserveAspectRatio="xMidYMid meet"><line x1="537.33" y1="42" x2="537.33" y2="252" stroke="#eee"/><line x1="242.67" y1="42" x2="242.67" y2="252" stroke="#eee"/><line x1="648.67" y1="42" x2="648.67" y2="252" stroke="#eee"/><line x1="131.33" y1="42" x2="131.33" y2="252" stroke="#eee"/><line x1="760" y1="42" x2="760" y2="252" stroke="#eee"/><line x1="20" y1="42" x2="20" y2="252" stroke="#eee"/><line x1="426" y1="42" x2="426" y2="252" stroke="#ccc"/><line x1="354" y1="42" x2="354" y2="252" stroke="#ccc"/><text x="593" y="26" text-anchor="middle" font-size="13" font-weight="700" fill="#6C5CE7">Urban</text><text x="187" y="26" text-anchor="middle" font-size="13" font-weight="700" fill="#00B894">Rural</text><g class="py-bar"><title>Urban 0-9 Years: 3.2%</title><rect x="426" y="46.5" width="178.13" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 0-9 Years: 4.1%</title><rect x="125.77" y="46.5" width="228.23" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="61" text-anchor="middle">0-9 Years</text><g class="py-bar"><title>Urban 10-19 Years: 4%</title><rect x="426" y="76.5" width="222.67" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 10-19 Years: 4.6%</title><rect x="97.93" y="76.5" width="256.07" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="91" text-anchor="middle">10-19 Years</text><g class="py-bar"><title>Urban 20-29 Years: 5.5%</title><rect x="426" y="106.5" width="306.17" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 20-29 Years: 3.8%</title><rect x="142.47" y="106.5" width="211.53" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="121" text-anchor="middle">20-29 Years</text><g class="py-bar"><title>Urban 30-39 Years: 5.1%</title><rect x="426" y="136.5" width="283.9" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 30-39 Years: 3.2%</title><rect x="175.87" y="136.5" width="178.13" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="151" text-anchor="middle">30-39 Years</text><g class="py-bar"><title>Urban 40-49 Years: 4.2%</title><rect x="426" y="166.5" width="233.8" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 40-49 Years: 2.9%</title><rect x="192.57" y="166.5" width="161.43" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="181" text-anchor="middle">40-49 Years</text><g class="py-bar"><title>Urban 50-59 Years: 3%</title><rect x="426" y="196.5" width="167" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 50-59 Years: 2.4%</title><rect x="220.4" y="196.5" width="133.6" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="211" text-anchor="middle">50-59 Years</text><g class="py-bar"><title>Urban 60+ Years: 2.1%</title><rect x="426" y="226.5" width="116.9" height="21" rx="2" fill="#6C5CE7"/></g><g class="py-bar"><title>Rural 60+ Years: 2%</title><rect x="242.67" y="226.5" width="111.33" height="21" rx="2" fill="#00B894"/></g><text class="py-cat" x="390" y="241" text-anchor="middle">60+ Years</text><text x="537.33" y="272" text-anchor="middle" font-size="10.5" fill="#999">2%</text><text x="242.67" y="272" text-anchor="middle" font-size="10.5" fill="#999">2%</text><text x="648.67" y="272" text-anchor="middle" font-size="10.5" fill="#999">4%</text><text x="131.33" y="272" text-anchor="middle" font-size="10.5" fill="#999">4%</text><text x="760" y="272" text-anchor="middle" font-size="10.5" fill="#999">6%</text><text x="20" y="272" text-anchor="middle" font-size="10.5" fill="#999">6%</text></svg></div>

[skillwrapper type="skt_pyramid" chart_title="Urban vs Rural Population" left_label="Rural" right_label="Urban" left_color="#00B894" right_color="#6C5CE7" unit="%"]

[skill label="0-9 Years" right="3.2" left="4.1"]

[skill label="10-19 Years" right="4.0" left="4.6"]

[skill label="20-29 Years" right="5.5" left="3.8"]

[skill label="30-39 Years" right="5.1" left="3.2"]

[skill label="40-49 Years" right="4.2" left="2.9"]

[skill label="50-59 Years" right="3.0" left="2.4"]

[skill label="60+ Years" right="2.1" left="2.0"]

[/skillwrapper]

Urban vs Rural Population