v2.4.2 released

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 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

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,

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,
                     }
                 },