Option to add customer JS code to customize the chart

ApexchartsWidget.php

@@ -28,6 +28,7 @@ class ApexchartsWidget extends Widget
     public $type = 'line';
     public $width = '100%';
     public $height = 350;
+    public $js = null;
 
     public function init()
     {
@@ -60,8 +61,9 @@ public function run()
         $width = json_encode($this->width);
         $height = json_encode((string)$this->height);
         $timeout = $this->timeout;
+        $js = $this->js;
 
-        echo $this->render('index', compact('id', 'timeout', 'chartOptions', 'series', 'type', 'width', 'height'));
+        echo $this->render('index', compact('id', 'timeout', 'chartOptions', 'series', 'type', 'width', 'height', 'js'));
     }
 
 

views/index.php

@@ -13,6 +13,7 @@
 /** @var $width string */
 /** @var $height string */
 /** @var $timeout integer */
+/** @var $js \yii\web\JsExpression */
 
 ?>
 
@@ -26,17 +27,18 @@
 
 setTimeout(function(e) {
   new Vue({
-  el: '#' + $id,
-  data: function() {
+    el: '#' + $id,
+    data: function() {
       return {
-          chartOptions: $chartOptions,
-          series: $series,
-          type: $type,
-          width: $width,
-          height: $height
+        chartOptions: $chartOptions,
+        series: $series,
+        type: $type,
+        width: $width,
+        height: $height
       }
-  }
-});
+    }
+  });
+  $js
 }, $timeout);