v2.5.0 released

Laravel 10.x Compatibility

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2.5.0 - 2023-02-01
+- Added tooltip override via `extras.tooltip`
+
+## 2.4.2 - 2023-02-01
+- Fixed hover title on column chart
+
+## 2.4.1 - 2022-02-18
+- Fixed xAxis auto-categories for MultiColumnChart 
+
+## 2.4.0 - 2022-02-14
+- Added Radar Chart (thanks to @AlexHupe)
+- Added Tree Map Chart
+- Added "donut" type to Pie Chart (thanks to @nicko170)
+
 ## 2.3.0 - 2021-02-12
 - Added `init()` method for better boot and $wire hoisting
 - Added color customization for columns, multiline and pie chart

composer.json

@@ -17,12 +17,12 @@
     ],
     "require": {
         "php": "^7.2|^7.3|^7.4|^8.0",
-        "illuminate/support": "^7.0|^8.0|^9.0",
+        "illuminate/support": "^7.0|^8.0|^9.0|^10.0",
         "livewire/livewire": "^2.3"
     },
     "require-dev": {
-        "orchestra/testbench": "^5.0|^6.0|^7.0",
+        "orchestra/testbench": "^5.0|^6.0|^7.0|^8.0",
-        "phpunit/phpunit": "^8.0"
+        "phpunit/phpunit": "^8.0|^9.5.10"
     },
     "autoload": {
         "psr-4": {
@@ -37,7 +37,6 @@
     "scripts": {
         "test": "vendor/bin/phpunit",
         "test-coverage": "vendor/bin/phpunit --coverage-html coverage"
-
     },
     "config": {
         "sort-packages": true

resources/js/columnChart.js

@@ -14,6 +14,7 @@ const columnChart = () => {
                 this.chart.destroy()
             }
 
+            const title = component.get('columnChartModel.title')
             const animated = component.get('columnChartModel.animated') || false;
             const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
             const dataLabels = component.get('columnChartModel.dataLabels') || {};
@@ -24,7 +25,10 @@ const columnChart = () => {
             const horizontal = component.get('columnChartModel.horizontal');
 
             const data = component.get('columnChartModel.data');
-            const series = [{ data: data.map(item => item.value)}]
+            const series = [{
+                name: title,
+                data: data.map(item => item.value)
+            }]
 
             const options = {
                 series: series,
@@ -80,13 +84,21 @@ const columnChart = () => {
 
                 yaxis: {
                     title: {
-                        text: component.get('columnChartModel.title'),
+                        text: title,
                     }
                 },
 
                 fill: {
                     opacity: component.get('columnChartModel.opacity') || 0.5
                 },
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
             const colors = component.get('columnChartModel.colors');

resources/js/lineChart.js

@@ -96,6 +96,14 @@ const lineChart = () => {
                         }
                     )
                 },
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
             this.chart = new ApexCharts(this.$refs.container, options);

resources/js/multiColumnChart.js

@@ -14,6 +14,7 @@ const multiColumnChart = () => {
                 this.chart.destroy()
             }
 
+            const title = component.get('columnChartModel.title')
             const stacked = component.get('columnChartModel.isStacked');
             const animated = component.get('columnChartModel.animated');
             const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
@@ -33,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 = {
@@ -81,7 +82,7 @@ const multiColumnChart = () => {
 
                 yaxis: {
                     title: {
-                        text: component.get('columnChartModel.title'),
+                        text: title,
                     }
                 },
 

resources/js/pieChart.js

@@ -73,6 +73,14 @@ const pieChart = () => {
                 ],
 
                 legend: component.get('pieChartModel.legend') || {},
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
             const colors = component.get('pieChartModel.colors');