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();
         }