Mountain

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

<?php
echo 'Hello, world!';

<style>
			.mtn_1{--ink:#e54035;font-family:inherit;max-width:860px;margin:0 auto;padding:24px 12px 6px;box-sizing:border-box;}
			.mtn_1 .pm-title{text-align:center;font-size:18px;font-weight:600;color:#222;margin:0 0 20px;}
			.mtn_1 .pm-scroll{overflow-x:auto;padding-bottom:4px;}
			.mtn_1 .pm-range{display:flex;align-items:flex-end;justify-content:center;min-width:396px;}
			.mtn_1 .pm-col{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;}
			.mtn_1 .pm-hill{position:relative;width:185%;align-self:center;}
			.mtn_1 .pm-hill svg{display:block;width:100%;height:100%;}
			.mtn_1 .pm-hillpath{fill:var(--ink);fill-opacity:.5;transition:fill-opacity .25s ease;}
			.mtn_1 .pm-hill:hover .pm-hillpath{fill-opacity:1;}
			.mtn_1 .pm-label{margin-top:9px;color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;}
			@media (prefers-reduced-motion:reduce){.mtn_1 .pm-hillpath{transition:none;}}
			</style><div class="mtn_1"><div class="pm-title">Nagpur to Mumbai Travel Time (Hours)</div><div class="pm-scroll"><div class="pm-range"><div class="pm-col" style="z-index:6;"><div class="pm-hill" style="height:16px;"><svg viewBox="0 0 10 10" preserveAspectRatio="none"><title>Plane: 2</title><path class="pm-hillpath" d="M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"/></svg></div><div class="pm-label">Plane</div></div><div class="pm-col" style="z-index:5;"><div class="pm-hill" style="height:96px;"><svg viewBox="0 0 10 10" preserveAspectRatio="none"><title>Train: 12</title><path class="pm-hillpath" d="M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"/></svg></div><div class="pm-label">Train</div></div><div class="pm-col" style="z-index:4;"><div class="pm-hill" style="height:240px;"><svg viewBox="0 0 10 10" preserveAspectRatio="none"><title>Ship: 30</title><path class="pm-hillpath" d="M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"/></svg></div><div class="pm-label">Ship</div></div><div class="pm-col" style="z-index:3;"><div class="pm-hill" style="height:128px;"><svg viewBox="0 0 10 10" preserveAspectRatio="none"><title>Car: 16</title><path class="pm-hillpath" d="M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"/></svg></div><div class="pm-label">Car</div></div><div class="pm-col" style="z-index:2;"><div class="pm-hill" style="height:144px;"><svg viewBox="0 0 10 10" preserveAspectRatio="none"><title>Bus: 18</title><path class="pm-hillpath" d="M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"/></svg></div><div class="pm-label">Bus</div></div><div class="pm-col" style="z-index:1;"><div class="pm-hill" style="height:144px;"><svg viewBox="0 0 10 10" preserveAspectRatio="none"><title>Bike: 18</title><path class="pm-hillpath" d="M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"/></svg></div><div class="pm-label">Bike</div></div></div></div></div>

[skillwrapper type="skt_mountain" chart_title="Nagpur to Mumbai Travel Time (Hours)" color="#e54035"]

[skill label="Plane" value="2"]

[skill label="Train" value="12"]

[skill label="Ship" value="30"]

[skill label="Car" value="16"]

[skill label="Bus" value="18"]

[skill label="Bike" value="18"]

[/skillwrapper]

Nagpur to Mumbai Travel Time (Hours)

Plane

Train

Ship

Car

Bus

Bike