The example chart on https://chartscss.org/docs/usage/ shows a drawback of how --size variables work. They are designed to scale between 0 and 1. The example markup does a very simple transformation from table data to --size:
<td style="--size: 0.46"> 46 </td>
The drawback is that the chart bars only use half the chart area, since the largest value is 0.46.
My suggestion is to add the following rule to the standard styles:
.charts-css td {
--size:calc((var(--value) - var(--valuemin,0)) / (var(--valuemax,1) - var(--valuemin,0)));
}This still allows the original --size markup to be used unchanged for backward compatibility, but now supports the following changes:
<tbody style="--valuemax: 50">
and
<td style="--value: 46"> 46 </td>
Which allows for a direct copy of table data to CSS --value variable, but better formats the chart to use more of the chart area since it scales values between 0 and 50 (--valuemin and --valuemax) to between 0 and 1.
The example chart on https://chartscss.org/docs/usage/ shows a drawback of how
--sizevariables work. They are designed to scale between 0 and 1. The example markup does a very simple transformation from table data to--size:The drawback is that the chart bars only use half the chart area, since the largest value is 0.46.
My suggestion is to add the following rule to the standard styles:
This still allows the original
--sizemarkup to be used unchanged for backward compatibility, but now supports the following changes:and
Which allows for a direct copy of table data to CSS
--valuevariable, but better formats the chart to use more of the chart area since it scales values between 0 and 50 (--valueminand--valuemax) to between 0 and 1.