Slope

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

<?php
echo 'Hello, world!';

<style>
			.sl_1{font-family:inherit;max-width:820px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.sl_1 .sp-title{font-size:18px;font-weight:600;color:#222;margin:0 0 6px;text-align:center;}
			.sl_1 svg{display:block;width:100%;height:auto;}
			.sl_1 .sp-line{opacity:.92;transition:opacity .15s ease;cursor:default;}
			.sl_1 svg:hover .sp-line{opacity:.28;}
			.sl_1 svg .sp-line:hover{opacity:1;}
			.sl_1 .sp-lab{font-size:12px;font-weight:600;}
			</style><div class="sl_1"><div class="sp-title">Market Share Change</div><svg viewBox="0 0 780 420" preserveAspectRatio="xMidYMid meet"><line x1="210" y1="44" x2="210" y2="400" stroke="#e3e3e3"/><line x1="570" y1="44" x2="570" y2="400" stroke="#e3e3e3"/><text x="210" y="26" text-anchor="middle" font-size="13" font-weight="700" fill="#555">2022</text><text x="570" y="26" text-anchor="middle" font-size="13" font-weight="700" fill="#555">2023</text><g class="sp-line"><title>Product A: 34 → 52</title><line x1="210" y1="231.03" x2="570" y2="68.55" stroke="#008FFB" stroke-width="2.5"/><circle cx="210" cy="231.03" r="5" fill="#008FFB"/><circle cx="570" cy="68.55" r="5" fill="#008FFB"/><text class="sp-lab" x="198" y="235.03" text-anchor="end" fill="#008FFB">Product A  34</text><text class="sp-lab" x="582" y="72.55" text-anchor="start" fill="#008FFB">52  Product A</text></g><g class="sp-line"><title>Product B: 28 → 24</title><line x1="210" y1="285.18" x2="570" y2="321.29" stroke="#FF4560" stroke-width="2.5"/><circle cx="210" cy="285.18" r="5" fill="#FF4560"/><circle cx="570" cy="321.29" r="5" fill="#FF4560"/><text class="sp-lab" x="198" y="289.18" text-anchor="end" fill="#FF4560">Product B  28</text><text class="sp-lab" x="582" y="325.29" text-anchor="start" fill="#FF4560">24  Product B</text></g><g class="sp-line"><title>Product C: 45 → 40</title><line x1="210" y1="131.74" x2="570" y2="176.87" stroke="#FEB019" stroke-width="2.5"/><circle cx="210" cy="131.74" r="5" fill="#FEB019"/><circle cx="570" cy="176.87" r="5" fill="#FEB019"/><text class="sp-lab" x="198" y="135.74" text-anchor="end" fill="#FEB019">Product C  45</text><text class="sp-lab" x="582" y="180.87" text-anchor="start" fill="#FEB019">40  Product C</text></g><g class="sp-line"><title>Product D: 18 → 31</title><line x1="210" y1="375.45" x2="570" y2="258.11" stroke="#00E396" stroke-width="2.5"/><circle cx="210" cy="375.45" r="5" fill="#00E396"/><circle cx="570" cy="258.11" r="5" fill="#00E396"/><text class="sp-lab" x="198" y="379.45" text-anchor="end" fill="#00E396">Product D  18</text><text class="sp-lab" x="582" y="262.11" text-anchor="start" fill="#00E396">31  Product D</text></g><g class="sp-line"><title>Product E: 22 → 20</title><line x1="210" y1="339.34" x2="570" y2="357.4" stroke="#a83232" stroke-width="2.5"/><circle cx="210" cy="339.34" r="5" fill="#a83232"/><circle cx="570" cy="357.4" r="5" fill="#a83232"/><text class="sp-lab" x="198" y="343.34" text-anchor="end" fill="#a83232">Product E  22</text><text class="sp-lab" x="582" y="361.4" text-anchor="start" fill="#a83232">20  Product E</text></g></svg></div>

[skillwrapper type="skt_slope" chart_title="Market Share Change" left_label="2022" right_label="2023"]

[skill label="Product A" start="34" end="52" color="#008FFB"]

[skill label="Product B" start="28" end="24" color="#FF4560"]

[skill label="Product C" start="45" end="40" color="#FEB019"]

[skill label="Product D" start="18" end="31" color="#00E396"]

[skill label="Product E" start="22" end="20" color="#a83232"]

[/skillwrapper]

Market Share Change