diff --git a/resources/js/areaChart.js b/resources/js/areaChart.js
index 134461e..00f9b0f 100644
--- a/resources/js/areaChart.js
+++ b/resources/js/areaChart.js
@@ -3,6 +3,12 @@ const areaChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
diff --git a/resources/js/columnChart.js b/resources/js/columnChart.js
index cf23ae7..61c3fc4 100644
--- a/resources/js/columnChart.js
+++ b/resources/js/columnChart.js
@@ -3,6 +3,12 @@ const columnChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -11,11 +17,17 @@ const columnChart = () => {
             const animated = component.get('columnChartModel.animated') || false;
             const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
             const dataLabels = component.get('columnChartModel.dataLabels') || {};
-            const data = component.get('columnChartModel.data');
             const sparkline = component.get('columnChartModel.sparkline');
+            const legend = component.get('columnChartModel.legend')
+            const grid = component.get('columnChartModel.grid');
+            const columnWidth = component.get('columnChartModel.columnWidth');
+            const horizontal = component.get('columnChartModel.horizontal');
+
+            const data = component.get('columnChartModel.data');
+            const series = [{ data: data.map(item => item.value)}]
 
             const options = {
-                series: [{ data: data.map(item => item.value)}],
+                series: series,
 
                 chart: {
                     type: 'bar',
@@ -48,12 +60,14 @@ const columnChart = () => {
                     },
                 },
 
-                legend: component.get('columnChartModel.legend') || {},
+                legend: legend,
+
+                grid: grid,
 
                 plotOptions: {
                     bar: {
-                        horizontal: false,
-                        columnWidth: '40%',
+                        horizontal: horizontal,
+                        columnWidth: `${columnWidth}%`,
                         distributed: true,
                     },
                 },
@@ -75,6 +89,12 @@ const columnChart = () => {
                 },
             };
 
+            const colors = component.get('columnChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }
diff --git a/resources/js/lineChart.js b/resources/js/lineChart.js
index 795abb2..e8beeb9 100644
--- a/resources/js/lineChart.js
+++ b/resources/js/lineChart.js
@@ -3,6 +3,12 @@ const lineChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
diff --git a/resources/js/multiColumnChart.js b/resources/js/multiColumnChart.js
index c6e11a2..410a50c 100644
--- a/resources/js/multiColumnChart.js
+++ b/resources/js/multiColumnChart.js
@@ -18,14 +18,13 @@ const multiColumnChart = () => {
             const animated = component.get('columnChartModel.animated');
             const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
             const dataLabels = component.get('columnChartModel.dataLabels');
-            const data = component.get('columnChartModel.data');
             const sparkline = component.get('columnChartModel.sparkline');
             const legend = component.get('columnChartModel.legend')
-            const colors = component.get('columnChartModel.colors');
             const grid = component.get('columnChartModel.grid');
             const columnWidth = component.get('columnChartModel.columnWidth');
             const horizontal = component.get('columnChartModel.horizontal');
 
+            const data = component.get('columnChartModel.data');
             const series = Object.keys(data)
                 .map(seriesName => ({
                     name: seriesName,
@@ -91,6 +90,8 @@ const multiColumnChart = () => {
                 },
             };
 
+            const colors = component.get('columnChartModel.colors');
+
             if (colors && colors.length > 0) {
                 options['colors'] = colors
             }
diff --git a/resources/js/multiLineChart.js b/resources/js/multiLineChart.js
index 78b872c..dddc54f 100644
--- a/resources/js/multiLineChart.js
+++ b/resources/js/multiLineChart.js
@@ -3,6 +3,12 @@ const multiLineChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
diff --git a/resources/js/pieChart.js b/resources/js/pieChart.js
index d9b4643..c468579 100644
--- a/resources/js/pieChart.js
+++ b/resources/js/pieChart.js
@@ -3,6 +3,12 @@ const pieChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -68,6 +74,12 @@ const pieChart = () => {
                 legend: component.get('pieChartModel.legend') || {},
             };
 
+            const colors = component.get('pieChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }
diff --git a/resources/views/livewire-area-chart.blade.php b/resources/views/livewire-area-chart.blade.php
index 35430ff..0e82c79 100644
--- a/resources/views/livewire-area-chart.blade.php
+++ b/resources/views/livewire-area-chart.blade.php
@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsAreaChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>
diff --git a/resources/views/livewire-column-chart.blade.php b/resources/views/livewire-column-chart.blade.php
index 9e0e963..6832f10 100644
--- a/resources/views/livewire-column-chart.blade.php
+++ b/resources/views/livewire-column-chart.blade.php
@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsColumnChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>
diff --git a/resources/views/livewire-line-chart.blade.php b/resources/views/livewire-line-chart.blade.php
index 2099038..d943799 100644
--- a/resources/views/livewire-line-chart.blade.php
+++ b/resources/views/livewire-line-chart.blade.php
@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsLineChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>
diff --git a/resources/views/livewire-multi-line-chart.blade.php b/resources/views/livewire-multi-line-chart.blade.php
index 2346aaf..493331f 100644
--- a/resources/views/livewire-multi-line-chart.blade.php
+++ b/resources/views/livewire-multi-line-chart.blade.php
@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsMultiLineChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>
diff --git a/resources/views/livewire-pie-chart.blade.php b/resources/views/livewire-pie-chart.blade.php
index b30ff9a..2706705 100644
--- a/resources/views/livewire-pie-chart.blade.php
+++ b/resources/views/livewire-pie-chart.blade.php
@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsPieChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>