Yii2 ChartJs throws A non-numeric value encountered error at page - charts

Question

I have installed a 2amigos/yii2-chartjs-widget to my yii2 project via composer and after installing it I am trying to tun the example as shown in the documentation.
<?php
ChartJs::widget([
'type' => 'pie',
'id' => 'structurePie',
'options' => [
'height' => 200,
'width' => 400,
],
'data' => [
'radius' => "90%",
'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels
'datasets' => [
[
'data' => ['35.6', '17.5', '46.9'], // Your dataset
'label' => '',
'backgroundColor' => [
'#ADC3FF',
'#FF9A9A',
'rgba(190, 124, 145, 0.8)'
],
'borderColor' => [
'#fff',
'#fff',
'#fff'
],
'borderWidth' => 1,
'hoverBorderColor'=>["#999","#999","#999"],
]
]
],
'clientOptions' => [
'legend' => [
'display' => false,
'position' => 'bottom',
'labels' => [
'fontSize' => 14,
'fontColor' => "#425062",
]
],
'tooltips' => [
'enabled' => true,
'intersect' => true
],
'hover' => [
'mode' => false
],
'maintainAspectRatio' => false,
],
'plugins' =>
new \yii\web\JsExpression('
[{
afterDatasetsDraw: function(chart, easing) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = rgb(0, 0, 0);
var fontSize = 16;
var fontStyle = normal;
var fontFamily = Helvetica;
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString()+'%';
// Make sure alignment settings are correct
ctx.textAlign = center;
ctx.textBaseline = middle;
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
}]')
])
?>
But when I refresh my page I am getting this error
A non-numeric value encountered
The error occurs at var dataString = dataset.data[index].toString()+'%';
I have been trying to solve this issue but I couldn't find anything
Any help would be highly appreciated.

Answer 1

Its because you are not escaping the quotes correctly you need to escape the single quotes in the statement
var dataString = dataset.data[index].toString()+' % ';
because your outer quotes in the new yii\db\Expression() are using single quotes to wrap the whole javascript, so change the line to
var dataString = dataset.data[index].toString()+\' % \';