Reversed Bar

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

<?php
echo 'Hello, world!';

<style>
			.rb_1{font-family:inherit;max-width:820px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.rb_1 .rb-title{font-size:18px;font-weight:600;color:#333333;margin:0 0 8px;}
			.rb_1 svg{display:block;width:100%;height:auto;}
			.rb_1 .rb-bar{transition:filter .15s ease;cursor:default;}
			.rb_1 .rb-bar:hover{filter:brightness(1.1);}
			.rb_1 .rb-cat{font-size:12px;fill:#333333;}
			.rb_1 .rb-val{font-size:11px;font-weight:600;fill:#333333;}
			</style><div class="rb_1"><div class="rb-title">Top Categories</div><svg viewBox="0 0 780 304" preserveAspectRatio="xMidYMid meet"><line x1="680" y1="10" x2="680" y2="276" stroke="#bbb"/><line x1="517" y1="10" x2="517" y2="276" stroke="#eee"/><line x1="354" y1="10" x2="354" y2="276" stroke="#eee"/><line x1="191" y1="10" x2="191" y2="276" stroke="#eee"/><line x1="28" y1="10" x2="28" y2="276" stroke="#eee"/><g class="rb-bar"><title>Groceries: 49</title><rect x="280.65" y="17.22" width="399.35" height="23.56" rx="2" fill="#42f575"/><text class="rb-cat" x="690" y="33" text-anchor="start">Groceries</text><text class="rb-val" x="286.65" y="33" text-anchor="start" fill="#fff">49</text></g><g class="rb-bar"><title>Transport: 55</title><rect x="231.75" y="55.22" width="448.25" height="23.56" rx="2" fill="#00E396"/><text class="rb-cat" x="690" y="71" text-anchor="start">Transport</text><text class="rb-val" x="237.75" y="71" text-anchor="start" fill="#fff">55</text></g><g class="rb-bar"><title>Rent: 41</title><rect x="345.85" y="93.22" width="334.15" height="23.56" rx="2" fill="#FEB019"/><text class="rb-cat" x="690" y="109" text-anchor="start">Rent</text><text class="rb-val" x="351.85" y="109" text-anchor="start" fill="#fff">41</text></g><g class="rb-bar"><title>Utilities: 67</title><rect x="133.95" y="131.22" width="546.05" height="23.56" rx="2" fill="#FF4560"/><text class="rb-cat" x="690" y="147" text-anchor="start">Utilities</text><text class="rb-val" x="139.95" y="147" text-anchor="start" fill="#fff">67</text></g><g class="rb-bar"><title>Dining: 22</title><rect x="500.7" y="169.22" width="179.3" height="23.56" rx="2" fill="#775DD0"/><text class="rb-cat" x="690" y="185" text-anchor="start">Dining</text><text class="rb-val" x="506.7" y="185" text-anchor="start" fill="#fff">22</text></g><g class="rb-bar"><title>Shopping: 43</title><rect x="329.55" y="207.22" width="350.45" height="23.56" rx="2" fill="#3F51B5"/><text class="rb-cat" x="690" y="223" text-anchor="start">Shopping</text><text class="rb-val" x="335.55" y="223" text-anchor="start" fill="#fff">43</text></g><g class="rb-bar"><title>Health: 36</title><rect x="386.6" y="245.22" width="293.4" height="23.56" rx="2" fill="#D4526E"/><text class="rb-cat" x="690" y="261" text-anchor="start">Health</text><text class="rb-val" x="392.6" y="261" text-anchor="start" fill="#fff">36</text></g><text x="680" y="296" text-anchor="middle" font-size="11" fill="#999">0</text><text x="517" y="296" text-anchor="middle" font-size="11" fill="#999">20</text><text x="354" y="296" text-anchor="middle" font-size="11" fill="#999">40</text><text x="191" y="296" text-anchor="middle" font-size="11" fill="#999">60</text><text x="28" y="296" text-anchor="middle" font-size="11" fill="#999">80</text></svg></div>

[skillwrapper type="skt_reversedbar" chart_title="Top Categories" text_color="#333333"]

[skill label="Groceries" value="49" color="#42f575"]

[skill label="Transport" value="55" color="#00E396"]

[skill label="Rent" value="41" color="#FEB019"]

[skill label="Utilities" value="67" color="#FF4560"]

[skill label="Dining"value="22" color="#775DD0"]

[skill label="Shopping" value="43" color="#3F51B5"]

[skill label="Health" value="36" color="#D4526E"]

[/skillwrapper]

Top Categories