Why did the graph stop displaying after rounding?

Question

JavaScript

Hello.
I am preparing an array of data for the KPI chart
data preparation function

function culcJson() {
            var jsonObj = ${json_text};
            var newJSON=[];
var KPI=[];
                var jsonResult = [];
                var a = 0;
                do {
                    var value=jsonObj.SucceededCount[a].SucceededCount_MEAS_VALUE/(jsonObj.SucceededCount[a].SucceededCount_MEAS_VALUE+jsonObj.FailedCount[a].FailedCount_MEAS_VALUE)*100;
                    KPI.push(value);
                    a += 1;
                } while (a < jsonObj.FailedCount.length)
                return KPI;
            }

for the graphic part I use

$(function () {
                var KPI=[];
                var jsonObj = ${json_text};
                if (jsonObj!=null){KPI=culcJson();}

                $('#container4').highcharts({
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: '${TITLE}'
                    },
                    xAxis: {
                        categories: [<c:forEach var="row" items="${SCRIPT_FailedCount.rows}">"${row.DATE__CURRENT__CHECK}",</c:forEach>]
                    },
                    yAxis: {
                        title: {
                            text: ''
                        }
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [
                        {
                            name: 'KPI',
                            data: KPI
                        }
                    ]
                });
            });

If you leave it as it is, then everything is OK.
The graph is displayed, BUT I wanted to reduce the number of decimal places for KPI values ​​to 2.
simple toFixed(2)
KPI.push(value.toFixed(2));
after that the graph is no longer displayed.
What could be the problem and how to solve it?

Answer 1

toFixed() returns a string, not a number.

v = 5;
v = v.toFixed(2);
console.log(typeof v);
>> string

If you want to get a number - add a cast (+ in front of the value)

v = 5;
v = +v.toFixed(2);
console.log(typeof v);
>> number