Added extra configuration options to column chart

resources/js/multiColumnChart.js

@@ -3,6 +3,12 @@ const multiColumnChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -14,6 +20,11 @@ const multiColumnChart = () => {
             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 series = Object.keys(data)
                 .map(seriesName => ({
@@ -23,7 +34,7 @@ const multiColumnChart = () => {
 
             const categories = component.get('columnChartModel.xAxis.categories').length > 0
                 ? component.get('columnChartModel.xAxis.categories')
-                : data[series[0].name].map(item => item.title)
+                : []
             ;
 
             const options = {
@@ -52,12 +63,14 @@ const multiColumnChart = () => {
                     }
                 },
 
-                legend: component.get('columnChartModel.legend'),
+                legend: legend,
+
+                grid: grid,
 
                 plotOptions: {
                     bar: {
-                        horizontal: false,
-                        columnWidth: '50%',
+                        horizontal: horizontal,
+                        columnWidth: `${columnWidth}%`,
                     },
                 },
 
@@ -78,6 +91,10 @@ const multiColumnChart = () => {
                 },
             };
 
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/views/livewire-multi-column-chart.blade.php

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsMultiColumnChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

src/Models/ColumnChartModel.php

@@ -13,6 +13,10 @@ class ColumnChartModel extends BaseChartModel
 {
     public $opacity;
 
+    public $columnWidth;
+
+    public $horizontal;
+
     public $isMultiColumn;
 
     public $isStacked;
@@ -27,7 +31,11 @@ class ColumnChartModel extends BaseChartModel
 
         $this->onColumnClickEventName = null;
 
-        $this->opacity = 0.5;
+        $this->opacity = 0.75;
+
+        $this->columnWidth = 70;
+
+        $this->horizontal = false;
 
         $this->isMultiColumn = false;
 
@@ -57,6 +65,20 @@ class ColumnChartModel extends BaseChartModel
         return $this;
     }
 
+    public function setHorizontal($value)
+    {
+        $this->horizontal = $value;
+
+        return $this;
+    }
+
+    public function setColumnWidth($value)
+    {
+        $this->columnWidth = $value;
+
+        return $this;
+    }
+
     public function setOpacity($opacity)
     {
         $this->opacity = $opacity;
@@ -104,6 +126,8 @@ class ColumnChartModel extends BaseChartModel
         return array_merge(parent::toArray(), [
             'onColumnClickEventName' => $this->onColumnClickEventName,
             'opacity' => $this->opacity,
+            'horizontal' => $this->horizontal,
+            'columnWidth' => $this->columnWidth,
             'isMultiColumn' => $this->isMultiColumn,
             'isStacked' => $this->isStacked,
             'data' => $this->data->toArray(),
@@ -118,6 +142,10 @@ class ColumnChartModel extends BaseChartModel
 
         $this->opacity = data_get($array, 'opacity', 0.5);
 
+        $this->columnWidth = data_get($array, 'columnWidth', 70);
+
+        $this->horizontal = data_get($array, 'horizontal', false);
+
         $this->isMultiColumn = data_get($array, 'isMultiColumn', false);
 
         $this->isStacked = data_get($array, 'isStacked', false);