I'm attempting to introduce a horizontal line at a specific point using chartscss.org
For instance, on the given chart utilizing Charts CSS below, I'm aiming to include a horizontal line at 15.5... Similar to the illustration shown.
I've experimented with various approaches such as adjusting the chart's position: relative and incorporating an absolute over the chart but am uncertain about how exactly to position it at 15.5 considering the chart/values provided.
tbody {
min-height: 450px;
}<link href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" rel="stylesheet"/>
<table class="charts-css column show-labels data-spacing-10" id="my-chart">
<thead>
<tr>
<th scope="col">Stat</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody class="position-relative mb-4">
<tr>
<th>1/14</th>
<td style="--size: 0.48; --color: #bc2e2f">12</td>
</tr>
<tr>
<th>1/15</th>
<td style="--size: 0.84; --color: #27ae60">21</td>
</tr>
<tr>
<th>1/19</th>
<td style="--size: 0.64; --color: #27ae60">16</td>
</tr>
<tr>
<th>1/24</th>
<td style="--size: 0.48; --color: #bc2e2f">12</td>
</tr>
<tr>
<th>1/27</th>
<td style="--size: 0.64; --color: #27ae60">16</td>
</tr>
<tr>
<th>1/29</th>
<td style="--size: 0.64; --color: #27ae60">16</td>
</tr>
<tr>
<th>1/31</th>
<td style="--size: 0.56; --color: #bc2e2f">14</td>
</tr>
<tr>
<th>2/4</th>
<td style="--size: 0.96; --color: #27ae60">24</td>
</tr>
<tr>
<th>2/5</th>
<td style="--size: 0.52; --color: #bc2e2f">13</td>
</tr>
<tr>
<th>2/7</th>
<td style="--size: 0.56; --color: #bc2e2f">14</td>
</tr>
<tr>
<th>2/9</th>
<td style="--size: 0.4; --color: #bc2e2f">10</td>
</tr>
<tr>
<th>2/11</th>
<td style="--size: 0.68; --color: #27ae60">17</td>
</tr>
<tr>
<th>2/12</th>
<td style="--size: 0.72; --color: #27ae60">18</td>
</tr>
<tr>
<th>2/16</th>
<td style="--size: 0.68; --color: #27ae60">17</td>
</tr>
<tr>
<th>2/24</th>
<td style="--size: 1; --color: #27ae60">25</td>
</tr>
</tbody>
</table>