Linear value scaling

[andrewgoz]

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.

[IDisposable]

Love this idea, want a PR?