Added Radial chart

Laravel 11.x Compatibility

.github/workflows/phpunit.yml

@@ -15,15 +15,15 @@ jobs:
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '8.0'
+          php-version: '8.3'
           extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, gd, exif, imagick, bcmath
-          coverage: none
+          coverage: xdebug
 
       - name: Checkout code
         uses: actions/checkout@v2
 
       - name: Install Composer dependencies
-        run: composer install --ignore-platform-reqs
+        run: composer install
 
       - name: Run tests
-        run: ./vendor/bin/phpunit
+        run: XDEBUG_MODE=coverage ./vendor/bin/phpunit --coverage-text

.phpunit.cache/test-results

@@ -0,0 +1 @@
+{"version":1,"defects":{"Asantibanez\\LivewireCharts\\Tests\\LivewirePieChartTest::can_build_component":7},"times":{"Asantibanez\\LivewireCharts\\Tests\\LivewireAreaChartTest::can_build_component":0.026,"Asantibanez\\LivewireCharts\\Tests\\LivewireColumnChartTest::can_build_component":0.003,"Asantibanez\\LivewireCharts\\Tests\\LivewireColumnChartTest::should_emit_event_if_present":0.01,"Asantibanez\\LivewireCharts\\Tests\\LivewireLineChartTest::can_build_component":0.003,"Asantibanez\\LivewireCharts\\Tests\\LivewirePieChartTest::can_build_component":0.025,"Asantibanez\\LivewireCharts\\Tests\\LivewirePieChartTest::should_emit_event_if_present":0.011,"Asantibanez\\LivewireCharts\\Tests\\LivewireRadarChartTest::can_build_component":0.003,"Asantibanez\\LivewireCharts\\Tests\\LivewireTreeMapChartTest::can_build_component":0.004,"Asantibanez\\LivewireCharts\\Tests\\LivewireTreeMapChartTest::should_emit_event_if_present":0.008}}

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 4.1.0 - 2024-08-22
+- Added Radial chart
+
+## 4.0.0 - 2024-08-22
+- Added Laravel 11 support
+
+## 3.1.0 - 2023-11-07
+- Added missing jsonConfig (thanks to @stijnvanouplines)
+- Changed 'emit' functions in Area,Line, and Radar chart to 'dispatch' (thanks to @redsquirrelstudio)
+
+## 3.0.0 - 2023-07-25
+- Added Livewire v3 support
+- Added ability to set chart theme (thanks to @syntaxlexx)
+- Added ability to configure chart via JSON properties
+
+## 2.5.0 - 2023-02-01
+- Added tooltip override via `extras.tooltip`
+
 ## 2.4.2 - 2023-02-01
 - Fixed hover title on column chart
 

README.md

@@ -19,21 +19,19 @@ You can install the package via composer:
 composer require asantibanez/livewire-charts
 ```
 
-Next, you must export the package public scripts. To do this run `php artisan vendor:publish` 
-and export `livewire-charts:public`. This command will export a `vendor/livewire-charts` folder under the 
-`public` directory of your app.  
+Next, you must export the package public scripts. To do this run 
 
 ```bash
-php artisan vendor:publish --tag=livewire-charts:public
-```
+php artisan livewire-charts:install
+```         
 
-> Note: This last step can also be done using `livewire-charts:install` command in the artisan console.
+This command will export a `vendor/livewire-charts` folder under the `public` directory of your app which is used 
+by the `@livewireChartsScripts` directive. More on this topic later.
 
 ## Requirements
 
 This package requires the following packages/libraries to work:
-- `Laravel Livewire v2` (https://laravel-livewire.com/) 
-- `Alpine Js` (https://github.com/alpinejs/alpine)
+- `Laravel Livewire v3` (https://livewire.laravel.com/)
 - `Apex Charts` (https://apexcharts.com/)
 
 Please follow each package/library instructions on how to set them properly in your project.
@@ -49,6 +47,7 @@ Livewire Charts supports out of the box the following types of charts
 - Area Chart (`LivewireAreaChart` component)
 - Radar Chart (`LivewireRadarChart` component)
 - Tree Map Chart (`LivewireTreeMapChart` component)
+- Radial Chart (`LivewireRadialChart` component)
 
 Each one comes with its own "model" class that allows you to define the chart's data and render behavior. 
 - `LivewireLineChart` uses `LineChartModel` to set up data points, markers, events and other ui customizations. 
@@ -57,6 +56,7 @@ Each one comes with its own "model" class that allows you to define the chart's
 - `LivewireAreaChart` uses `AreaChartModel` to set up data points, events and other ui customizations.
 - `LivewireRadarChart` uses `RadarChartModel` to set up data points, events and other ui customizations.
 - `LivewireTreeMapChart` uses `TreeMapChartModel` to set up data blocks, events and other ui customizations.
+- `LivewireRadialChart` uses `RadialChartModel` to set up data bars, events and other ui customizations.
 
 For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it
 ```php
@@ -75,14 +75,16 @@ With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` compon
 
 ```blade
 <livewire:livewire-column-chart
+    {{-- key="{{ $columnChartModel->reactiveKey() }}" --}}
     :column-chart-model="$columnChartModel"
 />
 ``` 
+>Note: Optionally add "key" to enable props reactivity if needed 💪
 
 Next, include the `@livewireChartsScripts` directive next to your other app scripts
 
 ```html
-<livewire:scripts />
+@livewireScripts
 @livewireChartsScripts
 ```
 
@@ -106,6 +108,7 @@ LivewireCharts::pieChartModel();
 LivewireCharts::areaChartModel();
 LivewireCharts::radarChartModel();
 LivewireCharts::treeMapChartModel();
+LivewireCharts::radialChartModel();
 ```
 
 ## Enabling Interactions
@@ -126,10 +129,12 @@ $columnChartModel =
  We can listen to the `onClickEvent` registering a listener in any other Livewire component.
  
  ```php
- protected $listeners = [
-     'onColumnClick' => 'handleOnColumnClick',
- ];
- ``` 
+#[On('onColumnClick')]
+public function handleOnColumnClick($event)
+{
+    // Handle event
+} 
+``` 
 
 ## "Reactive" Charts
 
@@ -168,20 +173,21 @@ for each type of chart.
 
 ### All
 
-| Method | Description |
-|--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
-| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
-| withDataLabels() | Enables data labels |
-| withoutDataLabels() | Disables data labels |
-| withLegend() | Shows legends |
-| withoutLegend() | Hides legends |
-| setColors(array $colors) | Set colors for chart |
-| addColors(string $color) | Append $color to $colors set |
-| setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
-| sparklined() | Enables Apex Charts sparkline feature |
-| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
+| Method                                  | Description                                                                                                                            |
+|-----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
+| setTitle(string $title)                 | Sets chart title                                                                                                                       |
+| setAnimated(boolean $animated)          | Enables/disables animation                                                                                                             |
+| setDataLabelsEnabled(boolean $enabled)  | Enables/disables data labels                                                                                                           |
+| withDataLabels()                        | Enables data labels                                                                                                                    |
+| withoutDataLabels()                     | Disables data labels                                                                                                                   |
+| withLegend()                            | Shows legends                                                                                                                          |
+| withoutLegend()                         | Hides legends                                                                                                                          |
+| setColors(array $colors)                | Set colors for chart                                                                                                                   |
+| addColors(string $color)                | Append $color to $colors set                                                                                                           |
+| setXAxisCategories(array $categories)   | Enables custom categories for chart X Axis                                                                                             |
+| sparklined()                            | Enables Apex Charts sparkline feature                                                                                                  |
+| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature                                                                                         |
+| setJsonConfig(array $config)            | Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation |
 
 ### LivewireLineChart
 
@@ -196,25 +202,28 @@ for each type of chart.
 
 ### LivewireColumnChart
 
-| Method | Description |
-|--------|-------------|
-| setOpacity(int $opacity) | Sets columns' opacity |
-| setColumnWidth(int $columnWidth) | Sets columns' width |
-| setHorizontal(boolean $value) | Sets columns or bars |
-| multiColumn() | Sets chart to display multiple column series |
-| singleColumn() | Sets chart to display a single column series |
-| stacked() | Sets chart to display column series stacked |
-| addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
-| addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) | Adds a column to a multicolumn chart. `$extras` is forwarded on click event |
-| onColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
+| Method                                                                                | Description                                                                                |
+|---------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
+| setOpacity(int $opacity)                                                              | Sets columns' opacity                                                                      |
+| setColumnWidth(int $columnWidth)                                                      | Sets columns' width                                                                        |
+| setHorizontal()                                                                       | Displays columns horizontally                                                              |
+| setVertical()                                                                         | Displays columns vertically                                                                |
+| multiColumn()                                                                         | Sets chart to display multiple column series                                               |
+| singleColumn()                                                                        | Sets chart to display a single column series                                               |
+| stacked()                                                                             | Sets chart to display column series stacked                                                |
+| addColumn(string $title, double $value, string $color, array $extras = [])            | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
+| addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) | Adds a column to a multicolumn chart. `$extras` is forwarded on click event                |
+| withOnColumnClickEventName(string $eventName)                                         | Event Name that will be fired when a column of the chart is clicked                        |
 
 ### LivewirePieChart
 
-| Method | Description |
-|--------|-------------|
-| setOpacity(int $opacity) | Sets slices' opacity |
+| Method                                                                    | Description                                                                               |
+|---------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|
+| setOpacity(int $opacity)                                                  | Sets slices' opacity                                                                      |
+| asPie()                                                                   | Displays chart as pie                                                                     |
+| asDonut()                                                                 | Displays chart as donut                                                                   |
 | addSlice(string $title, double $value, string $color, array $extras = []) | Adds a slice to the chart with the specified color. `$extras` is forwarded on click event |
-| withOnSliceClickEvent(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
+| withOnSliceClickEvent(string $eventName)                                  | Event Name that will be fired when a column of the chart is clicked                       |
 
 ### LivewireAreaChart
 
@@ -241,6 +250,14 @@ for each type of chart.
 | withOnBlockClickEvent(string $eventName) | Event Name that will be fired when a block of the chart is clicked |
 | setDistributed(bool $distributed) | Set whether the chart uses distribution or not |
 
+### LivewireRadialChart
+
+| Method                                                                         | Description                                                      |
+|--------------------------------------------------------------------------------|------------------------------------------------------------------|
+| addBar(string $title, double $value, string $color = null, array $extras = []) | Adds a bar to the default series                                 |
+| withOnBarClickEvent(string $eventName)                                         | Event Name that will be fired when a bar of the chart is clicked |
+| showTotal()                                                                    | Show the total percetage to the graph                            |
+| hideTotal()                                                                    | Hides the total percetage to the graph                           |
 
 ## Advanced Usage - Integrating Scripts
 
@@ -251,6 +268,31 @@ inside your resources folder. You can then adjust imports as you see fit in your
 
 >Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system. 
 
+
+## Advanced Usage - Custom Json Configs
+
+The `setJsonConfig()` method on every chart allows adding custom Apex properties not provided first hand by the package. 
+This means that any chart property supported by Apex chart can be passed down using this method.
+
+```php
+$chart->setJsonConfig([
+    'plotOptions.pie.startAngle' => -90,
+    'plotOptions.pie.endAngle' => 90,
+    'plotOptions.pie.offsetY' => 10,
+    'grid.padding.bottom' => -180,
+]);
+```
+
+>Note: If you want to add nested properties, you can use dot (.) notation for this matter.
+ 
+You can even pass down simple JS functions. For example, for formatting you can pass down your own closure
+
+```php
+$chart->setJsonConfig([
+    'tooltip.y.formatter' => '(val) => `$${val} million dollars baby!`'
+])
+```
+
 ## Troubleshooting
 
 Chart components must be placed inside a container with fixed height. This is because the chart will use all the given

composer.json

@@ -17,12 +17,12 @@
     ],
     "require": {
         "php": "^7.2|^7.3|^7.4|^8.0",
-        "illuminate/support": "^7.0|^8.0|^9.0",
-        "livewire/livewire": "^2.3"
+        "illuminate/support": "^7.0|^8.0|^9.0|^10.0|^11.0",
+        "livewire/livewire": "^3.0"
     },
     "require-dev": {
-        "orchestra/testbench": "^5.0|^6.0|^7.0",
-        "phpunit/phpunit": "^8.0"
+        "orchestra/testbench": "^5.0|^6.0|^7.0|^8.0|^9.0",
+        "phpunit/phpunit": "^8.0|^9.5.10|^10.5"
     },
     "autoload": {
         "psr-4": {
@@ -37,7 +37,6 @@
     "scripts": {
         "test": "vendor/bin/phpunit",
         "test-coverage": "vendor/bin/phpunit --coverage-html coverage"
-
     },
     "config": {
         "sort-packages": true
@@ -51,5 +50,7 @@
                 "LivewireCharts": "Asantibanez\\LivewireCharts\\LivewireChartsFacade"
             }
         }
-    }
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
 }

package.json

@@ -12,5 +12,8 @@
         "cross-env": "^7.0.2",
         "laravel-mix": "^5.0.9",
         "vue-template-compiler": "^2.6.12"
+    },
+    "dependencies": {
+        "deepmerge": "^2.2.1"
     }
 }

phpunit.xml.dist

@@ -1,29 +1,33 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<phpunit bootstrap="vendor/autoload.php"
-         backupGlobals="false"
-         backupStaticAttributes="false"
-         colors="true"
-         verbose="true"
-         convertErrorsToExceptions="true"
-         convertNoticesToExceptions="true"
-         convertWarningsToExceptions="true"
-         processIsolation="false"
-         stopOnFailure="false">
+<phpunit
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    bootstrap="vendor/autoload.php"
+    backupGlobals="false"
+    colors="true"
+    processIsolation="false"
+    stopOnFailure="false"
+    xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/10.5/phpunit.xsd"
+    cacheDirectory=".phpunit.cache"
+    backupStaticProperties="false"
+>
+    <coverage>
+        <report>
+            <clover outputFile="build/logs/clover.xml"/>
+            <html outputDirectory="build/coverage"/>
+            <text outputFile="build/coverage.txt"/>
+        </report>
+    </coverage>
     <testsuites>
         <testsuite name="Test Suite">
             <directory>tests</directory>
         </testsuite>
     </testsuites>
-    <filter>
-        <whitelist>
-            <directory suffix=".php">src/</directory>
-        </whitelist>
-    </filter>
     <logging>
-        <log type="tap" target="build/report.tap"/>
-        <log type="junit" target="build/report.junit.xml"/>
-        <log type="coverage-html" target="build/coverage"/>
-        <log type="coverage-text" target="build/coverage.txt"/>
-        <log type="coverage-clover" target="build/logs/clover.xml"/>
+        <junit outputFile="build/report.junit.xml"/>
     </logging>
+    <source>
+        <include>
+            <directory suffix=".php">src/</directory>
+        </include>
+    </source>
 </phpunit>

public/app.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
- * ApexCharts v3.22.2
- * (c) 2018-2020 Juned Chhipa
+ * ApexCharts v3.41.0
+ * (c) 2018-2023 ApexCharts
  * Released under the MIT License.
  */
 

resources/js/app.js

@@ -1,12 +1,13 @@
 import ApexCharts from 'apexcharts'
 import areaChart from "./areaChart"
 import columnChart from "./columnChart"
-import multiColumnChart from "./multiColumnChart";
+import multiColumnChart from "./multiColumnChart"
 import lineChart from "./lineChart"
 import multiLineChart from "./multiLineChart"
 import pieChart from "./pieChart"
 import radarChart from "./radarChart"
 import treeMapChart from "./treeMapChart"
+import radialChart from "./radialChart"
 
 window.ApexCharts = ApexCharts
 window.livewireChartsAreaChart = areaChart
@@ -17,3 +18,4 @@ window.livewireChartsPieChart = pieChart
 window.livewireChartsMultiColumnChart = multiColumnChart
 window.livewireChartsRadarChart = radarChart
 window.livewireChartsTreeMapChart = treeMapChart
+window.livewireChartsRadialChart = radialChart

resources/js/areaChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const areaChart = () => {
     return {
@@ -20,6 +21,7 @@ const areaChart = () => {
             const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
             const data = component.get('areaChartModel.data');
             const sparkline = component.get('areaChartModel.sparkline');
+            const jsonConfig = component.get('areaChartModel.jsonConfig');
 
             const categories = component.get('areaChartModel.xAxis.categories').length > 0
                 ? component.get('areaChartModel.xAxis.categories')
@@ -83,9 +85,12 @@ const areaChart = () => {
                         bottom: 0,
                     }
                 },
+
+                theme: component.get('areaChartModel.theme') || {},
+
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/columnChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const columnChart = () => {
     return {
@@ -14,7 +15,7 @@ const columnChart = () => {
                 this.chart.destroy()
             }
 
-            const title = component.get('columnChartModel.title');
+            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') || {};
@@ -23,6 +24,7 @@ const columnChart = () => {
             const grid = component.get('columnChartModel.grid');
             const columnWidth = component.get('columnChartModel.columnWidth');
             const horizontal = component.get('columnChartModel.horizontal');
+            const jsonConfig = component.get('columnChartModel.jsonConfig');
 
             const data = component.get('columnChartModel.data');
             const series = [{
@@ -84,13 +86,24 @@ const columnChart = () => {
 
                 yaxis: {
                     title: {
-                        text: component.get('columnChartModel.title'),
+                        text: title,
                     }
                 },
 
                 fill: {
                     opacity: component.get('columnChartModel.opacity') || 0.5
                 },
+
+                theme: component.get('columnChartModel.theme') || {},
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
+
             };
 
             const colors = component.get('columnChartModel.colors');
@@ -99,7 +112,7 @@ const columnChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/helpers.js

@@ -0,0 +1,27 @@
+import deepmerge from 'deepmerge'
+
+export const addPathToObjectWithValue = (obj, path, value) => {
+    const pList = path.split('.');
+    const key = pList.pop();
+    const pointer = pList.reduce((accumulator, currentValue) => {
+        if (accumulator[currentValue] === undefined) accumulator[currentValue] = {};
+        return accumulator[currentValue];
+    }, obj);
+    pointer[key] = value;
+    return obj;
+}
+
+export const mergedOptionsWithJsonConfig = (options, jsonConfig) => {
+    const customOptions = Object.keys(jsonConfig)
+        .reduce(function (obj, key) {
+            const value = jsonConfig[key]
+
+            if (typeof value === 'string' && value.includes('function')) {
+                return addPathToObjectWithValue(obj, key, eval('(' + value + ')'))
+            }
+
+            return addPathToObjectWithValue(obj, key, eval(value))
+        }, {})
+
+    return deepmerge(options, customOptions)
+}

resources/js/lineChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const lineChart = () => {
     return {
@@ -20,6 +21,7 @@ const lineChart = () => {
             const data = component.get('lineChartModel.data');
             const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
             const sparkline = component.get('lineChartModel.sparkline');
+            const jsonConfig = component.get('lineChartModel.jsonConfig');
 
             const series = [{
                 name: title,
@@ -61,6 +63,8 @@ const lineChart = () => {
 
                 stroke: component.get('lineChartModel.stroke') || {},
 
+                theme: component.get('lineChartModel.theme') || {},
+
                 title: {
                     text: title,
                     align: 'center'
@@ -96,9 +100,17 @@ const lineChart = () => {
                         }
                     )
                 },
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/multiColumnChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const multiColumnChart = () => {
     return {
@@ -24,6 +25,7 @@ const multiColumnChart = () => {
             const grid = component.get('columnChartModel.grid');
             const columnWidth = component.get('columnChartModel.columnWidth');
             const horizontal = component.get('columnChartModel.horizontal');
+            const jsonConfig = component.get('columnChartModel.jsonConfig');
 
             const data = component.get('columnChartModel.data');
             const series = Object.keys(data)
@@ -89,6 +91,9 @@ const multiColumnChart = () => {
                 fill: {
                     opacity: component.get('columnChartModel.opacity'),
                 },
+
+                theme: component.get('columnChartModel.theme') || {},
+
             };
 
             const colors = component.get('columnChartModel.colors');
@@ -97,7 +102,7 @@ const multiColumnChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/multiLineChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const multiLineChart = () => {
     return {
@@ -20,6 +21,7 @@ const multiLineChart = () => {
             const data = component.get('lineChartModel.data');
             const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
             const sparkline = component.get('lineChartModel.sparkline');
+            const jsonConfig = component.get('lineChartModel.jsonConfig');
 
             const series = Object.keys(data).map(key => {
                 return {
@@ -74,6 +76,8 @@ const multiLineChart = () => {
                 },
 
                 yaxis: component.get('lineChartModel.yAxis') || {},
+
+                theme: component.get('lineChartModel.theme') || {},
             };
 
             const colors = component.get('lineChartModel.colors');
@@ -82,7 +86,7 @@ const multiLineChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/pieChart.js

@@ -1,3 +1,4 @@
+import {mergedOptionsWithJsonConfig} from './helpers'
 
 const pieChart = () => {
     return {
@@ -21,6 +22,7 @@ const pieChart = () => {
             const data = component.get('pieChartModel.data')
             const sparkline = component.get('pieChartModel.sparkline')
             const type = component.get('pieChartModel.type')
+            const jsonConfig = component.get('pieChartModel.jsonConfig');
 
             const options = {
                 series: data.map(item => item.value),
@@ -73,6 +75,16 @@ const pieChart = () => {
                 ],
 
                 legend: component.get('pieChartModel.legend') || {},
+
+                theme: component.get('pieChartModel.theme') || {},
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
             const colors = component.get('pieChartModel.colors');
@@ -81,7 +93,7 @@ const pieChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/radarChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const radarChart = () => {
     return {
@@ -21,6 +22,7 @@ const radarChart = () => {
             const data = component.get('radarChartModel.data');
             const sparkline = component.get('radarChartModel.sparkline');
             const colors = component.get('radarChartModel.colors');
+            const jsonConfig = component.get('radarChartModel.jsonConfig');
 
             const series = Object.keys(data)
                 .map(seriesName => ({
@@ -88,7 +90,7 @@ const radarChart = () => {
 
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/radialChart.js

@@ -0,0 +1,74 @@
+import { mergedOptionsWithJsonConfig } from "./helpers";
+
+const radialChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire);
+            }, 0);
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+
+            const data = component.get("radialChartModel.data");
+            const showTotal = component.get("radialChartModel.showTotal");
+            const onBarClickEventName = component.get(
+                "radialChartModel.onBarClickEventName"
+            );
+            const jsonConfig = component.get("radialChartModel.jsonConfig");
+
+            const colors = component.get("radialChartModel.colors");
+
+            const options = {
+                series: data.map((item) => item.value),
+                labels: data.map((item) => item.title),
+                colors: Object.values(colors).filter(Boolean),
+                chart: {
+                    height: "100%",
+                    type: "radialBar",
+                    events: {
+                        dataPointSelection: function (
+                            event,
+                            chartContext,
+                            payload
+                        ) {
+                            console.log(payload);
+
+                            if (!onBarClickEventName) {
+                                return;
+                            }
+
+                            const bar = data[payload.dataPointIndex];
+                            console.log(bar);
+
+                            component.call("onBarClick", bar);
+                        },
+                    },
+                },
+                plotOptions: {
+                    radialBar: {
+                        dataLabels: {
+                            total: {
+                                show: showTotal,
+                            },
+                        },
+                    },
+                },
+            };
+
+            this.chart = new ApexCharts(
+                this.$refs.container,
+                mergedOptionsWithJsonConfig(options, jsonConfig)
+            );
+
+            this.chart.render();
+        },
+    };
+};
+
+export default radialChart;

resources/js/treeMapChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const treeMapChart = () => {
     return {
@@ -21,6 +22,7 @@ const treeMapChart = () => {
             const data = component.get('treeMapChartModel.data');
             const colors = component.get('treeMapChartModel.colors');
             const enableShades = component.get('treeMapChartModel.enableShades');
+            const jsonConfig = component.get('treeMapChartModel.jsonConfig');
 
             const series = Object.keys(data)
                 .map(seriesName => ({
@@ -54,7 +56,7 @@ const treeMapChart = () => {
 
                             const block = data[series[seriesIndex].name][dataPointIndex]
 
-                            component.emit(onBlockClickEventName, block)
+                            component.call('onBlockClick', block)
                         },
                     }
                 },
@@ -69,7 +71,7 @@ const treeMapChart = () => {
                 colors: colors,
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/views/livewire-radial-chart.blade.php

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

src/Charts/LivewireAreaChart.php

@@ -26,7 +26,7 @@ class LivewireAreaChart extends Component
             return;
         }
 
-        $this->emit($onPointClickEventName, $point);
+        $this->dispatch($onPointClickEventName, $point);
     }
 
     public function render()

src/Charts/LivewireColumnChart.php

@@ -26,7 +26,7 @@ class LivewireColumnChart extends Component
             return;
         }
 
-        $this->emit($onColumnClickEventName, $column);
+        $this->dispatch($onColumnClickEventName, $column);
     }
 
     public function render()

src/Charts/LivewireLineChart.php

@@ -26,7 +26,7 @@ class LivewireLineChart extends Component
             return;
         }
 
-        $this->emit($onPointClickEventName, $point);
+        $this->dispatch($onPointClickEventName, $point);
     }
 
     public function render()

src/Charts/LivewirePieChart.php

@@ -26,7 +26,7 @@ class LivewirePieChart extends Component
             return;
         }
 
-        $this->emit($onSliceClickEventName, $slice);
+        $this->dispatch($onSliceClickEventName, $slice);
     }
 
     public function render()

src/Charts/LivewireRadarChart.php

@@ -26,7 +26,7 @@ class LivewireRadarChart extends Component
             return;
         }
 
-        $this->emit($onPointClickEventName, $point);
+        $this->dispatch($onPointClickEventName, $point);
     }
 
     public function render()

src/Charts/LivewireRadialChart.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Charts;
+
+use Asantibanez\LivewireCharts\Models\RadialChartModel;
+use Livewire\Component;
+
+/**
+ * Class LivewireRadialChart
+ * @package Asantibanez\LivewireCharts\Charts
+ */
+class LivewireRadialChart extends Component
+{
+    public $radialChartModel;
+
+    public function mount(RadialChartModel $radialChartModel)
+    {
+        $this->radialChartModel = $radialChartModel->toArray();
+    }
+
+    public function onBarClick($bar): void
+    {
+        $onBarClickEventName = data_get($this->radialChartModel, 'onBarClickEventName');
+
+        if ($onBarClickEventName === null) {
+            return;
+        }
+
+        $this->dispatch($onBarClickEventName, $bar);
+    }
+
+    public function render()
+    {
+        return view('livewire-charts::livewire-radial-chart');
+    }
+}

src/Charts/LivewireTreeMapChart.php

@@ -18,6 +18,17 @@ class LivewireTreeMapChart extends Component
         $this->treeMapChartModel = $treeMapChartModel->toArray();
     }
 
+    public function onBlockClick($block)
+    {
+        $onBlockClickEventName = data_get($this->treeMapChartModel, 'onBlockClickEventName');
+
+        if ($onBlockClickEventName === null) {
+            return;
+        }
+
+        $this->dispatch($onBlockClickEventName, $block);
+    }
+
     public function render()
     {
         return view('livewire-charts::livewire-tree-map-chart');

src/Facades/LivewireCharts.php

@@ -7,6 +7,7 @@ use Asantibanez\LivewireCharts\Models\ColumnChartModel;
 use Asantibanez\LivewireCharts\Models\LineChartModel;
 use Asantibanez\LivewireCharts\Models\PieChartModel;
 use Asantibanez\LivewireCharts\Models\RadarChartModel;
+use Asantibanez\LivewireCharts\Models\RadialChartModel;
 use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
 use Illuminate\Support\Facades\Facade;
 
@@ -21,6 +22,7 @@ use Illuminate\Support\Facades\Facade;
  * @method static PieChartModel pieChartModel()
  * @method static RadarChartModel radarChartModel()
  * @method static TreeMapChartModel treeMapChartModel()
+ * @method static RadialChartModel radialChartModel()
  */
 class LivewireCharts extends Facade
 {

src/LivewireCharts.php

@@ -9,6 +9,7 @@ use Asantibanez\LivewireCharts\Models\ColumnChartModel;
 use Asantibanez\LivewireCharts\Models\LineChartModel;
 use Asantibanez\LivewireCharts\Models\PieChartModel;
 use Asantibanez\LivewireCharts\Models\RadarChartModel;
+use Asantibanez\LivewireCharts\Models\RadialChartModel;
 use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
 
 class LivewireCharts
@@ -52,8 +53,13 @@ class LivewireCharts
         return new RadarChartModel();
     }
 
-    public function treeMapChartModel()
+    public function treeMapChartModel(): TreeMapChartModel
     {
         return new TreeMapChartModel();
     }
+
+    public function radialChartModel(): RadialChartModel
+    {
+        return new RadialChartModel();
+    }
 }

src/LivewireChartsServiceProvider.php

@@ -7,6 +7,7 @@ use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
 use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
 use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
 use Asantibanez\LivewireCharts\Charts\LivewireRadarChart;
+use Asantibanez\LivewireCharts\Charts\LivewireRadialChart;
 use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
 use Asantibanez\LivewireCharts\Console\InstallCommand;
 use Illuminate\Support\Facades\Blade;
@@ -73,6 +74,7 @@ class LivewireChartsServiceProvider extends ServiceProvider
         Livewire::component('livewire-area-chart', LivewireAreaChart::class);
         Livewire::component('livewire-radar-chart', LivewireRadarChart::class);
         Livewire::component('livewire-tree-map-chart', LivewireTreeMapChart::class);
+        Livewire::component('livewire-radial-chart', LivewireRadialChart::class);
     }
 
     private function registerDirectives()

src/Models/BaseChartModel.php

@@ -3,6 +3,18 @@
 
 namespace Asantibanez\LivewireCharts\Models;
 
+use Asantibanez\LivewireCharts\Models\Traits\HasAnimation;
+use Asantibanez\LivewireCharts\Models\Traits\HasAxis;
+use Asantibanez\LivewireCharts\Models\Traits\HasColors;
+use Asantibanez\LivewireCharts\Models\Traits\HasDataLabels;
+use Asantibanez\LivewireCharts\Models\Traits\HasGrid;
+use Asantibanez\LivewireCharts\Models\Traits\HasJsonConfig;
+use Asantibanez\LivewireCharts\Models\Traits\HasLegend;
+use Asantibanez\LivewireCharts\Models\Traits\HasSparkline;
+use Asantibanez\LivewireCharts\Models\Traits\HasStroke;
+use Asantibanez\LivewireCharts\Models\Traits\HasTheme;
+use Asantibanez\LivewireCharts\Models\Traits\HasTitle;
+
 /**
  * Class BaseChartModel
  * @package Asantibanez\LivewireCharts\Models
@@ -18,6 +30,8 @@ class BaseChartModel
     use HasSparkline;
     use HasGrid;
     use HasColors;
+    use HasTheme;
+    use HasJsonConfig;
 
     public function __construct()
     {
@@ -30,6 +44,8 @@ class BaseChartModel
         $this->initSparkline();
         $this->initGrid();
         $this->initColors();
+        $this->initTheme();
+        $this->initJsonConfig();
     }
 
     public function reactiveKey()
@@ -48,7 +64,9 @@ class BaseChartModel
             $this->dataLabelsToArray(),
             $this->sparklineToArray(),
             $this->gridToArray(),
-            $this->colorsToArray()
+            $this->colorsToArray(),
+            $this->themeToArray(),
+            $this->jsonConfigToArray(),
         );
     }
 
@@ -63,5 +81,7 @@ class BaseChartModel
         $this->sparklineFromArray($array);
         $this->gridFromArray($array);
         $this->colorsFromArray($array);
+        $this->themeFromArray($array);
+        $this->jsonConfigFromArray($array);
     }
 }

src/Models/ColumnChartModel.php

@@ -11,19 +11,19 @@ namespace Asantibanez\LivewireCharts\Models;
  */
 class ColumnChartModel extends BaseChartModel
 {
-    public $opacity;
+    private $opacity;
 
-    public $columnWidth;
+    private $columnWidth;
 
-    public $horizontal;
+    private $horizontal;
 
-    public $isMultiColumn;
+    private $isMultiColumn;
 
-    public $isStacked;
+    private $isStacked;
 
-    public $onColumnClickEventName;
+    private $onColumnClickEventName;
 
-    public $data;
+    private $data;
 
     public function __construct()
     {
@@ -65,9 +65,16 @@ class ColumnChartModel extends BaseChartModel
         return $this;
     }
 
-    public function setHorizontal($value)
+    public function setHorizontal()
     {
-        $this->horizontal = $value;
+        $this->horizontal = true;
+
+        return $this;
+    }
+
+    public function setVertical()
+    {
+        $this->horizontal = false;
 
         return $this;
     }

src/Models/PieChartModel.php

@@ -9,13 +9,13 @@ namespace Asantibanez\LivewireCharts\Models;
  */
 class PieChartModel extends BaseChartModel
 {
-    public $onSliceClickEventName;
+    private $onSliceClickEventName;
 
-    public $opacity;
+    private $opacity;
 
-    public $type;
+    private $type;
 
-    public $data;
+    private $data;
 
     public function __construct()
     {
@@ -44,6 +44,16 @@ class PieChartModel extends BaseChartModel
         return $this;
     }
 
+    public function asPie()
+    {
+        return $this->setType('pie');
+    }
+
+    public function asDonut()
+    {
+        return $this->setType('donut');
+    }
+
     public function withOnSliceClickEvent($onSliceClickEventName)
     {
         $this->onSliceClickEventName = $onSliceClickEventName;

src/Models/RadialChartModel.php

@@ -0,0 +1,76 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+/**
+ * Class RadialChartModel
+ * @package Asantibanez\LivewireCharts\Models
+ */
+class RadialChartModel extends BaseChartModel
+{
+    public $data;
+    public $showTotal;
+    public $onBarClickEventName;
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->data = collect();
+
+        $this->showTotal = true;
+    }
+
+    public function showTotal(): self
+    {
+        $this->showTotal = true;
+        return $this;
+    }
+
+    public function hideTotal(): self
+    {
+        $this->showTotal = false;
+        return $this;
+    }
+
+    public function addBar($title, $value, $color = null, $extras = []): self
+    {
+        $this->data->push([
+            'title' => $title,
+            'value' => $value,
+            'extras' => $extras,
+        ]);
+
+        $this->addColor($color);
+
+        return $this;
+    }
+
+    public function withOnBarClickEvent($onBarClickEvent): self
+    {
+        $this->onBarClickEventName = $onBarClickEvent;
+
+        return $this;
+    }
+
+    public function toArray()
+    {
+        return array_merge(parent::toArray(), [
+            'data' => $this->data->toArray(),
+            'showTotal' => $this->showTotal,
+            'onBarClickEventName' => $this->onBarClickEventName,
+        ]);
+    }
+
+    public function fromArray($array)
+    {
+        parent::fromArray($array);
+
+        $this->data = collect(data_get($array, 'data', []));
+
+        $this->showTotal = data_get($array, 'showTotal', true);
+
+        $this->onBarClickEventName = data_get($array, 'onBarClickEventName', null);
+    }
+}

src/Models/Traits/HasAnimation.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasAnimation

src/Models/Traits/HasAxis.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasAxis

src/Models/Traits/HasColors.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasColors

src/Models/Traits/HasDataLabels.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasDataLabels

src/Models/Traits/HasGrid.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasGrid

src/Models/Traits/HasJsonConfig.php

@@ -0,0 +1,39 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models\Traits;
+
+
+trait HasJsonConfig
+{
+    private $jsonConfig;
+
+    public function setJsonConfig($jsonConfig)
+    {
+        $this->jsonConfig = $jsonConfig;
+
+        return $this;
+    }
+
+    protected function initJsonConfig()
+    {
+        $this->jsonConfig = [];
+    }
+
+    private function defaultJsonConfig()
+    {
+        return [];
+    }
+
+    protected function jsonConfigFromArray($array)
+    {
+        $this->jsonConfig = data_get($array, 'jsonConfig', $this->defaultJsonConfig());
+    }
+
+    protected function jsonConfigToArray()
+    {
+        return [
+            'jsonConfig' => $this->jsonConfig,
+        ];
+    }
+}

src/Models/Traits/HasLegend.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasLegend

src/Models/Traits/HasSparkline.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasSparkline

src/Models/Traits/HasStroke.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasStroke

src/Models/Traits/HasTheme.php

@@ -0,0 +1,125 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models\Traits;
+
+
+trait HasTheme
+{
+    private $theme;
+    private $mode;
+    private $palette;
+
+    /**
+     * Initialize
+     */
+    public function initTheme()
+    {
+        $this->theme = $this->defaultTheme();
+    }
+
+    /**
+     * set default theme
+     *
+     * @return array $theme
+     */
+    private function defaultTheme()
+    {
+        return [
+            'mode' => 'light',
+            'palette' => 'palette1'
+        ];
+    }
+
+    /**
+     * set theme mode
+     *
+     * @param string $mode
+     *
+     * @return $this
+     */
+    public function setThemeMode(string $mode)
+    {
+        data_set($this->theme, 'mode', $mode);
+
+        return $this;
+    }
+
+    /**
+     * set theme mode to dark theme
+     *
+     * @return $this
+     */
+    public function darkMode()
+    {
+        data_set($this->theme, 'mode', 'dark');
+
+        return $this;
+    }
+
+    /**
+     * set theme mode to light theme
+     *
+     * @return $this
+     */
+    public function lightMode()
+    {
+        data_set($this->theme, 'mode', 'light');
+
+        return $this;
+    }
+
+    /**
+     * set the dark mode option to on or off
+     *
+     * @param bool $status = true
+     *
+     * @return $this
+     */
+    public function setDarkMode(bool $status = true)
+    {
+        data_set($this->theme, 'mode', $status ? 'dark' : 'light');
+
+        return $this;
+    }
+
+    /**
+     * set theme pallete
+     *
+     * @param string $pallete
+     *
+     * @return $this
+     */
+    public function setThemePalette(string $palette)
+    {
+        data_set($this->theme, 'palette', $palette);
+
+        return $this;
+    }
+
+    /**
+     * convert the theme to array
+     *
+     * @param string $mode
+     *
+     * @return $this
+     */
+    protected function themeToArray()
+    {
+        return [
+            'theme' => $this->theme,
+        ];
+    }
+
+    /**
+     * set theme from array
+     *
+     * @param string $mode
+     *
+     * @return $this
+     */
+    protected function themeFromArray($array)
+    {
+        $this->theme = data_get($array, 'theme', $this->defaultTheme());
+    }
+}

src/Models/Traits/HasTitle.php

@@ -1,7 +1,7 @@
 <?php
 
 
-namespace Asantibanez\LivewireCharts\Models;
+namespace Asantibanez\LivewireCharts\Models\Traits;
 
 
 trait HasTitle
@@ -15,6 +15,11 @@ trait HasTitle
         return $this;
     }
 
+    public function getTitle()
+    {
+        return $this->title;
+    }
+
     protected function initTitle()
     {
         $this->title = $this->defaultTitle();

src/Models/TreeMapChartModel.php

@@ -9,9 +9,6 @@ namespace Asantibanez\LivewireCharts\Models;
  */
 class TreeMapChartModel extends BaseChartModel
 {
-    use HasTitle;
-    use HasColors;
-
     public $data;
     public $distributed;
     public $onBlockClickEventName;
@@ -36,7 +33,7 @@ class TreeMapChartModel extends BaseChartModel
 
     public function addBlock($title, $value, $extras = [])
     {
-        return $this->addSeriesBlock($this->title, $title, $value, $extras);
+        return $this->addSeriesBlock($this->getTitle(), $title, $value, $extras);
     }
 
     public function addSeriesBlock($seriesName, $title, $value, $extras = [])

tests/LivewireAreaChartTest.php

@@ -3,12 +3,12 @@
 namespace Asantibanez\LivewireCharts\Tests;
 
 use Asantibanez\LivewireCharts\Charts\LivewireAreaChart;
+use Livewire\Features\SupportTesting\Testable;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
 
 class LivewireAreaChartTest extends TestCase
 {
-    private function buildComponent() : TestableLivewire
+    private function buildComponent() : Testable
     {
         return Livewire::test(LivewireAreaChart::class);
     }

tests/LivewireColumnChartTest.php

@@ -3,12 +3,12 @@
 namespace Asantibanez\LivewireCharts\Tests;
 
 use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
+use Livewire\Features\SupportTesting\Testable;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
 
 class LivewireColumnChartTest extends TestCase
 {
-    private function buildComponent() : TestableLivewire
+    private function buildComponent() : Testable
     {
         return Livewire::test(LivewireColumnChart::class);
     }
@@ -22,4 +22,23 @@ class LivewireColumnChartTest extends TestCase
         //Assert
         $this->assertNotNull($component);
     }
+
+    /** @test */
+    public function should_emit_event_if_present()
+    {
+        //Arrange
+        $component = $this->buildComponent();
+
+        $columnChartModel = $component->columnChartModel;
+
+        data_set($columnChartModel, 'onColumnClickEventName', 'custom-event');
+
+        $component->set('columnChartModel', $columnChartModel);
+
+        //Act
+        $component->runAction('onColumnClick', []);
+
+        //Assert
+        $component->assertDispatched('custom-event');
+    }
 }

tests/LivewireLineChartTest.php

@@ -3,12 +3,12 @@
 namespace Asantibanez\LivewireCharts\Tests;
 
 use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
+use Livewire\Features\SupportTesting\Testable;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
 
 class LivewireLineChartTest extends TestCase
 {
-    private function buildComponent() : TestableLivewire
+    private function buildComponent() : Testable
     {
         return Livewire::test(LivewireLineChart::class);
     }

tests/LivewirePieChartTest.php

@@ -3,12 +3,12 @@
 namespace Asantibanez\LivewireCharts\Tests;
 
 use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
+use Livewire\Features\SupportTesting\Testable;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
 
 class LivewirePieChartTest extends TestCase
 {
-    private function buildComponent() : TestableLivewire
+    private function buildComponent() : Testable
     {
         return Livewire::test(LivewirePieChart::class);
     }
@@ -22,4 +22,23 @@ class LivewirePieChartTest extends TestCase
         //Assert
         $this->assertNotNull($component);
     }
+
+    /** @test */
+    public function should_emit_event_if_present()
+    {
+        //Arrange
+        $component = $this->buildComponent();
+
+        $pieChartModel = $component->pieChartModel;
+
+        data_set($pieChartModel, 'onSliceClickEventName', 'custom-event');
+
+        $component->set('pieChartModel', $pieChartModel);
+
+        //Act
+        $component->runAction('onSliceClick', []);
+
+        //Assert
+        $component->assertDispatched('custom-event');
+    }
 }

tests/LivewireRadarChartTest.php

@@ -3,12 +3,12 @@
 namespace Asantibanez\LivewireCharts\Tests;
 
 use Asantibanez\LivewireCharts\Charts\LivewireRadarChart;
+use Livewire\Features\SupportTesting\Testable;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
 
 class LivewireRadarChartTest extends TestCase
 {
-    private function buildComponent() : TestableLivewire
+    private function buildComponent() : Testable
     {
         return Livewire::test(LivewireRadarChart::class);
     }

tests/LivewireRadialChartTest.php

@@ -0,0 +1,44 @@
+<?php
+
+
+use Asantibanez\LivewireCharts\Charts\LivewireRadialChart;
+use Asantibanez\LivewireCharts\Tests\TestCase;
+use Livewire\Features\SupportTesting\Testable;
+use Livewire\Livewire;
+
+class LivewireRadialChartTest extends TestCase
+{
+    private function buildComponent() : Testable
+    {
+        return Livewire::test(LivewireRadialChart::class);
+    }
+
+    /** @test */
+    public function can_build_component()
+    {
+        //Act
+        $component = $this->buildComponent();
+
+        //Assert
+        $this->assertNotNull($component);
+    }
+
+    /** @test */
+    public function should_emit_event_if_present()
+    {
+        //Arrange
+        $component = $this->buildComponent();
+
+        $radialChartModel = $component->radialChartModel;
+
+        data_set($radialChartModel, 'onBarClickEventName', 'custom-event');
+
+        $component->set('radialChartModel', $radialChartModel);
+
+        //Act
+        $component->runAction('onBarClick', []);
+
+        //Assert
+        $component->assertDispatched('custom-event');
+    }
+}

tests/LivewireTreeMapChartTest.php

@@ -3,12 +3,12 @@
 namespace Asantibanez\LivewireCharts\Tests;
 
 use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
+use Livewire\Features\SupportTesting\Testable;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
 
 class LivewireTreeMapChartTest extends TestCase
 {
-    private function buildComponent() : TestableLivewire
+    private function buildComponent() : Testable
     {
         return Livewire::test(LivewireTreeMapChart::class);
     }
@@ -22,4 +22,23 @@ class LivewireTreeMapChartTest extends TestCase
         //Assert
         $this->assertNotNull($component);
     }
+
+    /** @test */
+    public function should_emit_event_if_present()
+    {
+        //Arrange
+        $component = $this->buildComponent();
+
+        $treeMapChartModel = $component->treeMapChartModel;
+
+        data_set($treeMapChartModel, 'onBlockClickEventName', 'custom-event');
+
+        $component->set('treeMapChartModel', $treeMapChartModel);
+
+        //Act
+        $component->runAction('onBlockClick', []);
+
+        //Assert
+        $component->assertDispatched('custom-event');
+    }
 }