Dumbbell

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

<?php
echo 'Hello, world!';

<style>
			.db_1{font-family:inherit;max-width:820px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.db_1 .db-title{font-size:18px;font-weight:600;color:#222;margin:0 0 6px;}
			.db_1 .db-legend{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 8px;}
			.db_1 .db-leg{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#555;}
			.db_1 .db-sw{width:12px;height:12px;border-radius:50%;display:inline-block;}
			.db_1 svg{display:block;width:100%;height:auto;}
			.db_1 .db-dot{transition:r .15s ease;}
			.db_1 .db-bell:hover .db-dot{r:8;}
			.db_1 .db-val{font-size:10.5px;font-weight:600;fill:#666;}
			</style><div class="db_1"><div class="db-title">2022 vs 2023 by Team</div><div class="db-legend"><span class="db-leg"><span class="db-sw" style="background:#008FFB;"></span>2022</span><span class="db-leg"><span class="db-sw" style="background:#00E396;"></span>2023</span></div><svg viewBox="0 0 780 380" preserveAspectRatio="xMidYMid meet"><line x1="46" y1="354" x2="764" y2="354" stroke="#eee"/><line x1="46" y1="286" x2="764" y2="286" stroke="#eee"/><line x1="46" y1="218" x2="764" y2="218" stroke="#eee"/><line x1="46" y1="150" x2="764" y2="150" stroke="#eee"/><line x1="46" y1="82" x2="764" y2="82" stroke="#eee"/><line x1="46" y1="14" x2="764" y2="14" stroke="#eee"/><g class="db-bell"><title>Operations — 2022: 42, 2023: 58 (Δ 16)</title><line x1="105.83" y1="204.4" x2="105.83" y2="95.6" stroke="#d3dce6" stroke-width="3" stroke-linecap="round"/><circle class="db-dot" cx="105.83" cy="204.4" r="6" fill="#008FFB"/><circle class="db-dot" cx="105.83" cy="95.6" r="6" fill="#00E396"/><rect x="46" y="14" width="119.67" height="340" fill="transparent"/></g><g class="db-bell"><title>Sales — 2022: 30, 2023: 51 (Δ 21)</title><line x1="225.5" y1="286" x2="225.5" y2="143.2" stroke="#d3dce6" stroke-width="3" stroke-linecap="round"/><circle class="db-dot" cx="225.5" cy="286" r="6" fill="#008FFB"/><circle class="db-dot" cx="225.5" cy="143.2" r="6" fill="#00E396"/><rect x="165.67" y="14" width="119.67" height="340" fill="transparent"/></g><g class="db-bell"><title>Marketing — 2022: 55, 2023: 48 (Δ -7)</title><line x1="345.17" y1="116" x2="345.17" y2="163.6" stroke="#d3dce6" stroke-width="3" stroke-linecap="round"/><circle class="db-dot" cx="345.17" cy="116" r="6" fill="#008FFB"/><circle class="db-dot" cx="345.17" cy="163.6" r="6" fill="#00E396"/><rect x="285.33" y="14" width="119.67" height="340" fill="transparent"/></g><g class="db-bell"><title>Support — 2022: 22, 2023: 40 (Δ 18)</title><line x1="464.83" y1="340.4" x2="464.83" y2="218" stroke="#d3dce6" stroke-width="3" stroke-linecap="round"/><circle class="db-dot" cx="464.83" cy="340.4" r="6" fill="#008FFB"/><circle class="db-dot" cx="464.83" cy="218" r="6" fill="#00E396"/><rect x="405" y="14" width="119.67" height="340" fill="transparent"/></g><g class="db-bell"><title>R&D — 2022: 38, 2023: 62 (Δ 24)</title><line x1="584.5" y1="231.6" x2="584.5" y2="68.4" stroke="#d3dce6" stroke-width="3" stroke-linecap="round"/><circle class="db-dot" cx="584.5" cy="231.6" r="6" fill="#008FFB"/><circle class="db-dot" cx="584.5" cy="68.4" r="6" fill="#00E396"/><rect x="524.67" y="14" width="119.67" height="340" fill="transparent"/></g><g class="db-bell"><title>Finance — 2022: 42, 2023: 44 (Δ 2)</title><line x1="704.17" y1="204.4" x2="704.17" y2="190.8" stroke="#d3dce6" stroke-width="3" stroke-linecap="round"/><circle class="db-dot" cx="704.17" cy="204.4" r="6" fill="#008FFB"/><circle class="db-dot" cx="704.17" cy="190.8" r="6" fill="#00E396"/><rect x="644.33" y="14" width="119.67" height="340" fill="transparent"/></g><text x="40" y="357" text-anchor="end" font-size="11" fill="#999">20</text><text x="40" y="289" text-anchor="end" font-size="11" fill="#999">30</text><text x="40" y="221" text-anchor="end" font-size="11" fill="#999">40</text><text x="40" y="153" text-anchor="end" font-size="11" fill="#999">50</text><text x="40" y="85" text-anchor="end" font-size="11" fill="#999">60</text><text x="40" y="17" text-anchor="end" font-size="11" fill="#999">70</text><text x="105.83" y="372" text-anchor="middle" font-size="11" fill="#999">Operations</text><text x="225.5" y="372" text-anchor="middle" font-size="11" fill="#999">Sales</text><text x="345.17" y="372" text-anchor="middle" font-size="11" fill="#999">Marketing</text><text x="464.83" y="372" text-anchor="middle" font-size="11" fill="#999">Support</text><text x="584.5" y="372" text-anchor="middle" font-size="11" fill="#999">R&D</text><text x="704.17" y="372" text-anchor="middle" font-size="11" fill="#999">Finance</text></svg></div>

[skillwrapper type="skt_dumbbell" chart_title="2022 vs 2023 by Team" label_a="2022" label_b="2023" color_a="#008FFB" color_b="#00E396"]

[skill label="Operations" a="42" b="58"]

[skill label="Sales" a="30" b="51"]

[skill label="Marketing" a="55" b="48"]

[skill label="Support"a="22" b="40"]

[skill label="R&D" a="38" b="62"]

[skill label="Finance" a="42" b="44"]

[/skillwrapper]

2022 vs 2023 by Team

20222023