Currently, there is no way to manage chart settings using other ui-builder components. The chart is a visualization component. Created and configured in the visualizations section. In the ui-builder it can only be controlled by own settings.

But we might need to think about how to implement your problem.

Thank you for considering implementing this functionality.
It would certainly be useful.

For the time being, is it possible to create multiple sliders that are linked in a way that they always add up to 100%? It could function like a pie chart.
When one slider is increased, the others would need to decrease proportionally, and vice versa.

Below is a mock-up.
It is not functional, but the values of all three sliders add up to 100%

When a slider value is changed, the change is evaluated to see if it’s greater than or less than the previous value.
If the dragged slider is increased, the other two get decreased …by the same amount, divided by 2 (the number of other sliders).
The inverse applies when the dragged slider is decreased.

The only trouble is that float values are slipping through without getting rounded.

I made a function that is supposed to round to two decimal places.

When you multiply numbers in JavaScript, especially floating point numbers like 0.01, you may sometimes encounter results that have many digits after the decimal point, which you might not expect. This phenomenon is due to how floating point numbers are represented and handled in computer arithmetic, specifically following the IEEE 754 standard used by JavaScript and many other programming languages.

Here’s a breakdown of why multiplying by 0.01 can lead to such results:

Floating Point Precision: JavaScript uses double-precision 64-bit binary format to represent numbers. This allows for a very wide range but not always exact precision, especially when decimals are involved. The number 0.01 in binary cannot be represented with perfect accuracy. It’s an infinite repeating binary fraction, similar to how 1/3 is repeating in decimal.

Binary Representation: In binary, 0.01 (decimal) is approximately 0.0000001010001111010111000010100011110101110000101000111101011100 in binary (up to 52 binary digits for a double-precision float). This approximation introduces a tiny error margin.

Arithmetic Operations: When you perform arithmetic operations with such approximations, the tiny errors can compound. For example, multiplying 0.01 with another floating point number combines the imprecision of both numbers, potentially magnifying the error.

Displaying Results: When JavaScript displays these numbers, it converts the internal binary representation back into a decimal, showing you a number that can sometimes have many trailing zeroes or unexpected digits beyond the decimal point.

If you’re working in situations where precision is crucial, such as financial calculations, you might need to use strategies to manage these floating point peculiarities. One common approach is to use integer-based calculations or to utilize libraries designed to handle decimal numbers more accurately.

Here’s a JavaScript code snippet demonstrating the issue and one way to handle it using toFixed() for rounding:

let product = 0.1 * 0.01;
console.log(product); // Might output a very small error like 0.0010000000000000002
// To fix the presentation:
let roundedProduct = product.toFixed(2); // Rounds to 2 decimal places
console.log(roundedProduct); // Outputs "0.00"

So you can create a custom function with the following code: