Isometric

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

<?php
echo 'Hello, world!';

<style>
			.iso_1{font-family:inherit;max-width:500px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.iso_1 .iso-ttl{text-align:center;font-size:18px;font-weight:600;color:#222;margin:0 0 8px;}
			.iso_1 .iso-svg{display:block;width:50%;height:auto;overflow:visible;}
			.iso_1 .iso-bar{transition:filter .2s ease;cursor:default;}
			.iso_1 .iso-bar:hover{filter:brightness(1.08);}
			.iso_1 .iso-val{font-size:13px;font-weight:700;fill:#333;}
			.iso_1 .iso-lab{font-size:12px;fill:#666;}
			</style><div class="iso_1"><div class="iso-ttl">Quarterly Revenue</div><svg class="iso-svg" viewBox="0 0 391.48 484"><g transform="translate(81.43,254)"><g class="iso-bar"><title>Q1: 65</title><polygon points="-55.43,32 0,64 0,-146 -55.43,-178"  fill="#9b2a22"/><polygon points="55.43,32 0,64 0,-146 55.43,-178" fill="#c1342b"/><polygon points="0,-210 55.43,-178 0,-146 -55.43,-178"   fill="#ff4a3c"/><text class="iso-val" x="0" y="-218" text-anchor="middle">65</text><text class="iso-lab" x="-27.71" y="64" text-anchor="middle">Q1</text></g><g class="iso-bar"><title>Q2: 50</title><polygon points="20.78,76 76.21,108 76.21,-53.54 20.78,-85.54"  fill="#a27d0f"/><polygon points="131.64,76 76.21,108 76.21,-53.54 131.64,-85.54" fill="#ca9b12"/><polygon points="76.21,-117.54 131.64,-85.54 76.21,-53.54 20.78,-85.54"   fill="#ffd919"/><text class="iso-val" x="76.21" y="-125.54" text-anchor="middle">50</text><text class="iso-lab" x="48.5" y="108" text-anchor="middle">Q2</text></g><g class="iso-bar"><title>Q3: 20</title><polygon points="96.99,120 152.42,152 152.42,87.38 96.99,55.38"  fill="#216f36"/><polygon points="207.85,120 152.42,152 152.42,87.38 207.85,55.38" fill="#298a43"/><polygon points="152.42,23.38 207.85,55.38 152.42,87.38 96.99,55.38"   fill="#3ac15e"/><text class="iso-val" x="152.42" y="15.38" text-anchor="middle">20</text><text class="iso-lab" x="124.71" y="152" text-anchor="middle">Q3</text></g><g class="iso-bar"><title>Q4: 60</title><polygon points="173.21,164 228.63,196 228.63,2.15 173.21,-29.85"  fill="#799681"/><polygon points="284.06,164 228.63,196 228.63,2.15 284.06,-29.85" fill="#97baa1"/><polygon points="228.63,-61.85 284.06,-29.85 228.63,2.15 173.21,-29.85"   fill="#d4ffe1"/><text class="iso-val" x="228.63" y="-69.85" text-anchor="middle">60</text><text class="iso-lab" x="200.92" y="196" text-anchor="middle">Q4</text></g></g></svg></div>

[skillwrapper type="skt_isometric" chart_title="Quarterly Revenue"]

[skill label="Q1" value="65" color="#eb4034"]

[skill label="Q2" value="50" color="#F6BD16"]

[skill label="Q3" value="20" color="#32a852"]

[skill label="Q4" value="60" color="#b8e3c4"]

[/skillwrapper]

Quarterly Revenue