Area Negative

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

<?php
echo 'Hello, world!';

<style>
			.an_1{font-family:inherit;max-width:820px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.an_1 .an-title{font-size:18px;font-weight:600;color:#222;margin:0 0 6px;}
			.an_1 .an-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 8px;}
			.an_1 .an-leg{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#555;}
			.an_1 .an-sw{width:12px;height:12px;border-radius:50%;display:inline-block;}
			.an_1 svg{display:block;width:100%;height:auto;}
			.an_1 .an-tip,.an_1 .an-guide{opacity:0;transition:opacity .12s;pointer-events:none;}
			.an_1 .an-hc:hover .an-tip,.an_1 .an-hc:hover .an-guide{opacity:1;}
			</style><div class="an_1"><div class="an-title">Negative Values</div><div class="an-legend"><span class="an-leg"><span class="an-sw" style="background:#008FFB;"></span>Network</span><span class="an-leg"><span class="an-sw" style="background:#00E396;"></span>Memory</span></div><svg viewBox="0 0 780 360" preserveAspectRatio="xMidYMid meet"><defs><linearGradient id="an_1_g0" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#008FFB" stop-opacity="0.55"/><stop offset="100%" stop-color="#008FFB" stop-opacity="0.05"/></linearGradient><linearGradient id="an_1_g1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#00E396" stop-opacity="0.55"/><stop offset="100%" stop-color="#00E396" stop-opacity="0.05"/></linearGradient></defs><line x1="46" y1="334" x2="764" y2="334" stroke="#eee" stroke-width="1"/><line x1="46" y1="227.33" x2="764" y2="227.33" stroke="#aaa" stroke-width="1.3"/><line x1="46" y1="120.67" x2="764" y2="120.67" stroke="#eee" stroke-width="1"/><line x1="46" y1="14" x2="764" y2="14" stroke="#eee" stroke-width="1"/><path d="M46,291.33 C59.3,264.67 99.19,134.89 125.78,131.33 C152.37,127.78 178.96,275.33 205.56,270 C232.15,264.67 258.74,93.11 285.33,99.33 C311.93,105.56 338.52,312.67 365.11,307.33 C391.7,302 418.3,76.22 444.89,67.33 C471.48,58.44 498.07,246.89 524.67,254 C551.26,261.11 577.85,105.56 604.44,110 C631.04,114.44 657.63,275.33 684.22,280.67 C710.81,286 750.7,165.11 764,142 L764,227.33 L46,227.33 Z" fill="url(#an_1_g0)"/><path d="M46,280.67 C59.3,257.56 99.19,146.44 125.78,142 C152.37,137.56 178.96,257.56 205.56,254 C232.15,250.44 258.74,116.22 285.33,120.67 C311.93,125.11 338.52,294.89 365.11,280.67 C391.7,266.44 418.3,62 444.89,35.33 C471.48,8.67 498.07,78 524.67,120.67 C551.26,163.33 577.85,285.11 604.44,291.33 C631.04,297.56 657.63,168.67 684.22,158 C710.81,147.33 750.7,215.78 764,227.33 L764,227.33 L46,227.33 Z" fill="url(#an_1_g1)"/><path d="M46,291.33 C59.3,264.67 99.19,134.89 125.78,131.33 C152.37,127.78 178.96,275.33 205.56,270 C232.15,264.67 258.74,93.11 285.33,99.33 C311.93,105.56 338.52,312.67 365.11,307.33 C391.7,302 418.3,76.22 444.89,67.33 C471.48,58.44 498.07,246.89 524.67,254 C551.26,261.11 577.85,105.56 604.44,110 C631.04,114.44 657.63,275.33 684.22,280.67 C710.81,286 750.7,165.11 764,142" fill="none" stroke="#008FFB" stroke-width="2"/><path d="M46,280.67 C59.3,257.56 99.19,146.44 125.78,142 C152.37,137.56 178.96,257.56 205.56,254 C232.15,250.44 258.74,116.22 285.33,120.67 C311.93,125.11 338.52,294.89 365.11,280.67 C391.7,266.44 418.3,62 444.89,35.33 C471.48,8.67 498.07,78 524.67,120.67 C551.26,163.33 577.85,285.11 604.44,291.33 C631.04,297.56 657.63,168.67 684.22,158 C710.81,147.33 750.7,215.78 764,227.33" fill="none" stroke="#00E396" stroke-width="2"/><text x="40" y="337" text-anchor="end" font-size="11" fill="#999">-20</text><text x="40" y="230.33" text-anchor="end" font-size="11" fill="#999">0</text><text x="40" y="123.67" text-anchor="end" font-size="11" fill="#999">20</text><text x="40" y="17" text-anchor="end" font-size="11" fill="#999">40</text><text x="46" y="352" text-anchor="middle" font-size="11" fill="#999">Jan</text><text x="125.78" y="352" text-anchor="middle" font-size="11" fill="#999">Feb</text><text x="205.56" y="352" text-anchor="middle" font-size="11" fill="#999">Mar</text><text x="285.33" y="352" text-anchor="middle" font-size="11" fill="#999">Apr</text><text x="365.11" y="352" text-anchor="middle" font-size="11" fill="#999">May</text><text x="444.89" y="352" text-anchor="middle" font-size="11" fill="#999">Jun</text><text x="524.67" y="352" text-anchor="middle" font-size="11" fill="#999">Jul</text><text x="604.44" y="352" text-anchor="middle" font-size="11" fill="#999">Aug</text><text x="684.22" y="352" text-anchor="middle" font-size="11" fill="#999">Sep</text><text x="764" y="352" text-anchor="middle" font-size="11" fill="#999">Oct</text><g class="an-hc"><line class="an-guide" x1="46" y1="14" x2="46" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="56" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="66" y="36" font-size="11.5" font-weight="700" fill="#333">Jan</text><circle cx="70" cy="50" r="4" fill="#008FFB"/><text x="80" y="54" font-size="11" fill="#555">Network</text><text x="176" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">-12</text><circle cx="70" cy="66" r="4" fill="#00E396"/><text x="80" y="70" font-size="11" fill="#555">Memory</text><text x="176" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">-10</text></g><rect x="6.11" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="125.78" y1="14" x2="125.78" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="135.78" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="145.77777777778" y="36" font-size="11.5" font-weight="700" fill="#333">Feb</text><circle cx="149.77777777778" cy="50" r="4" fill="#008FFB"/><text x="159.77777777778" y="54" font-size="11" fill="#555">Network</text><text x="255.77777777778" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">18</text><circle cx="149.77777777778" cy="66" r="4" fill="#00E396"/><text x="159.77777777778" y="70" font-size="11" fill="#555">Memory</text><text x="255.77777777778" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">16</text></g><rect x="85.89" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="205.56" y1="14" x2="205.56" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="215.56" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="225.55555555556" y="36" font-size="11.5" font-weight="700" fill="#333">Mar</text><circle cx="229.55555555556" cy="50" r="4" fill="#008FFB"/><text x="239.55555555556" y="54" font-size="11" fill="#555">Network</text><text x="335.55555555556" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">-8</text><circle cx="229.55555555556" cy="66" r="4" fill="#00E396"/><text x="239.55555555556" y="70" font-size="11" fill="#555">Memory</text><text x="335.55555555556" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">-5</text></g><rect x="165.67" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="285.33" y1="14" x2="285.33" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="295.33" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="305.33333333333" y="36" font-size="11.5" font-weight="700" fill="#333">Apr</text><circle cx="309.33333333333" cy="50" r="4" fill="#008FFB"/><text x="319.33333333333" y="54" font-size="11" fill="#555">Network</text><text x="415.33333333333" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">24</text><circle cx="309.33333333333" cy="66" r="4" fill="#00E396"/><text x="319.33333333333" y="70" font-size="11" fill="#555">Memory</text><text x="415.33333333333" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">20</text></g><rect x="245.44" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="365.11" y1="14" x2="365.11" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="375.11" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="385.11111111111" y="36" font-size="11.5" font-weight="700" fill="#333">May</text><circle cx="389.11111111111" cy="50" r="4" fill="#008FFB"/><text x="399.11111111111" y="54" font-size="11" fill="#555">Network</text><text x="495.11111111111" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">-15</text><circle cx="389.11111111111" cy="66" r="4" fill="#00E396"/><text x="399.11111111111" y="70" font-size="11" fill="#555">Memory</text><text x="495.11111111111" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">-10</text></g><rect x="325.22" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="444.89" y1="14" x2="444.89" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="454.89" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="464.88888888889" y="36" font-size="11.5" font-weight="700" fill="#333">Jun</text><circle cx="468.88888888889" cy="50" r="4" fill="#008FFB"/><text x="478.88888888889" y="54" font-size="11" fill="#555">Network</text><text x="574.88888888889" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">30</text><circle cx="468.88888888889" cy="66" r="4" fill="#00E396"/><text x="478.88888888889" y="70" font-size="11" fill="#555">Memory</text><text x="574.88888888889" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">36</text></g><rect x="405" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="524.67" y1="14" x2="524.67" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="534.67" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="544.66666666667" y="36" font-size="11.5" font-weight="700" fill="#333">Jul</text><circle cx="548.66666666667" cy="50" r="4" fill="#008FFB"/><text x="558.66666666667" y="54" font-size="11" fill="#555">Network</text><text x="654.66666666667" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">-5</text><circle cx="548.66666666667" cy="66" r="4" fill="#00E396"/><text x="558.66666666667" y="70" font-size="11" fill="#555">Memory</text><text x="654.66666666667" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">20</text></g><rect x="484.78" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="604.44" y1="14" x2="604.44" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="614.44" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="624.44444444444" y="36" font-size="11.5" font-weight="700" fill="#333">Aug</text><circle cx="628.44444444444" cy="50" r="4" fill="#008FFB"/><text x="638.44444444444" y="54" font-size="11" fill="#555">Network</text><text x="734.44444444444" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">22</text><circle cx="628.44444444444" cy="66" r="4" fill="#00E396"/><text x="638.44444444444" y="70" font-size="11" fill="#555">Memory</text><text x="734.44444444444" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">-12</text></g><rect x="564.56" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="684.22" y1="14" x2="684.22" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="544.22" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="554.22222222222" y="36" font-size="11.5" font-weight="700" fill="#333">Sep</text><circle cx="558.22222222222" cy="50" r="4" fill="#008FFB"/><text x="568.22222222222" y="54" font-size="11" fill="#555">Network</text><text x="664.22222222222" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">-10</text><circle cx="558.22222222222" cy="66" r="4" fill="#00E396"/><text x="568.22222222222" y="70" font-size="11" fill="#555">Memory</text><text x="664.22222222222" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">13</text></g><rect x="644.33" y="14" width="79.78" height="320" fill="transparent"/></g><g class="an-hc"><line class="an-guide" x1="764" y1="14" x2="764" y2="334" stroke="#bbb" stroke-dasharray="4 3"/><g class="an-tip"><rect x="624" y="18" width="130" height="60" rx="5" fill="#fff" stroke="#ddd"/><text x="634" y="36" font-size="11.5" font-weight="700" fill="#333">Oct</text><circle cx="638" cy="50" r="4" fill="#008FFB"/><text x="648" y="54" font-size="11" fill="#555">Network</text><text x="744" y="54" text-anchor="end" font-size="11" font-weight="600" fill="#333">16</text><circle cx="638" cy="66" r="4" fill="#00E396"/><text x="648" y="70" font-size="11" fill="#555">Memory</text><text x="744" y="70" text-anchor="end" font-size="11" font-weight="600" fill="#333">0</text></g><rect x="724.11" y="14" width="79.78" height="320" fill="transparent"/></g></svg></div>

[skillwrapper type="skt_areaneg" chart_title="Negative Values" categories="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct"]

[skill label="Network" values="-12,18,-8,24,-15,30,-5,22,-10,16"]

[skill label="Memory" values="-10,16,-5,20,-10,36-8,20,-12,13"]

[/skillwrapper]

Negative Values

NetworkMemory