diff --git a/resources/views/livewire-area-chart.blade.php b/resources/views/livewire-area-chart.blade.php
index 82f105a..095741a 100644
--- a/resources/views/livewire-area-chart.blade.php
+++ b/resources/views/livewire-area-chart.blade.php
@@ -16,10 +16,16 @@
                         this.chart.destroy()
                     }
 
+                    const title = component.get('areaChartModel.title');
+                    const animated = component.get('areaChartModel.animated') || false;
+                    const dataLabels = component.get('areaChartModel.dataLabels') || {};
+                    const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
+                    const data = component.get('areaChartModel.data');
+
                     var options = {
                         series: [{
-                            name: component.get('areaChartModel.title'),
-                            data: component.get('areaChartModel.data').map(item => item.value)
+                            name: title,
+                            data: data.map(item => item.value)
                         }],
                         chart: {
                             type: 'area',
@@ -30,25 +36,22 @@
                             toolbar: { show: false },
 
                             animations: {
-                                enabled: component.get('areaChartModel.animated') || false,
+                                enabled: animated,
                             },
 
                             events: {
                                 markerClick: function(event, chartContext, { dataPointIndex }) {
-                                    const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
                                     if (!onPointClickEventName) {
                                         return
                                     }
 
-                                    const point = component.get('areaChartModel.data')[dataPointIndex]
+                                    const point = data[dataPointIndex]
                                     component.call('onPointClick', point)
                                 }
                             }
                         },
 
-                        dataLabels: {
-                            enabled: false
-                        },
+                        dataLabels: dataLabels,
 
                         colors: [component.get('areaChartModel.color') || '#2E93fA'],
 
@@ -57,11 +60,11 @@
                         },
 
                         title: {
-                            text: component.get('areaChartModel.title'),
+                            text: title,
                             align: 'center'
                         },
 
-                        labels: component.get('areaChartModel.data').map(item => item.title),
+                        labels: data.map(item => item.title),
 
                         xaxis: component.get('areaChartModel.xAxis') || {},
 
diff --git a/resources/views/livewire-column-chart.blade.php b/resources/views/livewire-column-chart.blade.php
index 7fd56ce..6151d4e 100644
--- a/resources/views/livewire-column-chart.blade.php
+++ b/resources/views/livewire-column-chart.blade.php
@@ -12,16 +12,17 @@
                 chart: null,
 
                 drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
                     if (this.chart) {
                         this.chart.destroy()
                     }
 
+                    const animated = component.get('columnChartModel.animated') || false;
+                    const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
+                    const dataLabels = component.get('columnChartModel.dataLabels') || {};
+                    const data = component.get('columnChartModel.data');
+
                     const options = {
-                        series: [{ data: component.get('columnChartModel.data').map(item => item.value)}],
+                        series: [{ data: data.map(item => item.value)}],
 
                         chart: {
                             type: 'bar',
@@ -32,29 +33,27 @@
                             },
 
                             animations: {
-                                enabled: component.get('columnChartModel.animated') || false,
+                                enabled: animated,
                             },
 
                             events: {
                                 dataPointSelection: function(event, chartContext, config) {
-                                    const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
-
                                     if (!onColumnClickEventName) {
                                         return
                                     }
 
                                     const { dataPointIndex } = config
-                                    const column = component.get('columnChartModel.data')[dataPointIndex]
+                                    const column = data[dataPointIndex]
                                     component.call('onColumnClick', column)
                                 },
                             }
                         },
 
-                        colors: component.get('columnChartModel.data').map(item => item.color),
+                        colors: data.map(item => item.color),
 
                         labels: {
                             style: {
-                                colors: component.get('columnChartModel.data').map(item => item.color),
+                                colors: data.map(item => item.color),
                             },
                         },
 
@@ -68,12 +67,10 @@
                             },
                         },
 
-                        dataLabels: {
-                            enabled: false,
-                        },
+                        dataLabels: dataLabels,
 
                         xaxis: {
-                            categories: component.get('columnChartModel.data').map(item => item.title),
+                            categories: data.map(item => item.title),
                         },
 
                         yaxis: {
diff --git a/resources/views/livewire-line-chart.blade.php b/resources/views/livewire-line-chart.blade.php
index eef2137..0b0012a 100644
--- a/resources/views/livewire-line-chart.blade.php
+++ b/resources/views/livewire-line-chart.blade.php
@@ -17,7 +17,7 @@
 
                     const title = component.get('lineChartModel.title');
                     const animated = component.get('lineChartModel.animated') || false;
-                    const isMultiLine = component.get('lineChartModel.isMultiLine')
+                    const dataLabels = component.get('lineChartModel.dataLabels') || {};
                     const data = component.get('lineChartModel.data');
                     const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
 
@@ -55,9 +55,7 @@
                             }
                         },
 
-                        dataLabels: {
-                            enabled: false,
-                        },
+                        dataLabels: dataLabels,
 
                         stroke: component.get('lineChartModel.stroke') || {},
 
diff --git a/resources/views/livewire-multi-line-chart.blade.php b/resources/views/livewire-multi-line-chart.blade.php
index cb86f82..04a9373 100644
--- a/resources/views/livewire-multi-line-chart.blade.php
+++ b/resources/views/livewire-multi-line-chart.blade.php
@@ -17,7 +17,7 @@
 
                     const title = component.get('lineChartModel.title');
                     const animated = component.get('lineChartModel.animated') || false;
-                    const isMultiLine = component.get('lineChartModel.isMultiLine')
+                    const dataLabels = component.get('lineChartModel.dataLabels') || {};
                     const data = component.get('lineChartModel.data');
                     const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
 
@@ -58,9 +58,7 @@
                             }
                         },
 
-                        dataLabels: {
-                            enabled: false,
-                        },
+                        dataLabels: dataLabels,
 
                         stroke: component.get('lineChartModel.stroke') || {},
 
diff --git a/resources/views/livewire-pie-chart.blade.php b/resources/views/livewire-pie-chart.blade.php
index 76a4b7f..3154ebc 100644
--- a/resources/views/livewire-pie-chart.blade.php
+++ b/resources/views/livewire-pie-chart.blade.php
@@ -15,46 +15,48 @@
                         this.chart.destroy()
                     }
 
+                    const title = component.get('pieChartModel.title');
+                    const animated = component.get('pieChartModel.animated') || false
+                    const dataLabels = component.get('pieChartModel.dataLabels') || {}
+                    const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
+                    const data = component.get('pieChartModel.data')
+
                     const options = {
-                        series: component.get('pieChartModel.data').map(item => item.value),
+                        series: data.map(item => item.value),
 
                         chart: {
                             height: '100%',
                             type: 'pie',
 
                             animations: {
-                                enabled: component.get('pieChartModel.animated') || false,
+                                enabled: animated,
                             },
 
                             events: {
                                 dataPointSelection: function(event, chartContext, config) {
-                                    const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
-
                                     if (!onSliceClickEventName) {
                                         return
                                     }
 
                                     const { dataPointIndex } = config
-                                    const slice = component.get('pieChartModel.data')[dataPointIndex]
+                                    const slice = data[dataPointIndex]
                                     component.call('onSliceClick', slice)
                                 },
                             }
                         },
 
-                        labels: component.get('pieChartModel.data').map(item => item.title),
+                        labels: data.map(item => item.title),
 
-                        dataLabels: {
-                            enabled: false,
-                        },
+                        dataLabels: dataLabels,
 
-                        colors: component.get('pieChartModel.data').map(item => item.color),
+                        colors: data.map(item => item.color),
 
                         fill: {
                             opacity: component.get('pieChartModel.opacity'),
                         },
 
                         title: {
-                            text: component.get('pieChartModel.title'),
+                            text: title,
                             align: 'center',
                         },
 
diff --git a/src/Models/BaseChartModel.php b/src/Models/BaseChartModel.php
index 72066f1..8334aef 100644
--- a/src/Models/BaseChartModel.php
+++ b/src/Models/BaseChartModel.php
@@ -14,6 +14,7 @@ class BaseChartModel
     use HasAxis;
     use HasStroke;
     use HasLegend;
+    use HasDataLabels;
 
     public function __construct()
     {
@@ -22,6 +23,7 @@ class BaseChartModel
         $this->initAxis();
         $this->initStroke();
         $this->initLegend();
+        $this->initDataLabels();
     }
 
     public function reactiveKey()
@@ -36,7 +38,8 @@ class BaseChartModel
             $this->animationToArray(),
             $this->axisToArray(),
             $this->strokeToArray(),
-            $this->legendToArray()
+            $this->legendToArray(),
+            $this->dataLabelsToArray()
         );
     }
 
@@ -47,5 +50,6 @@ class BaseChartModel
         $this->axisFromArray($array);
         $this->strokeFromArray($array);
         $this->legendFromArray($array);
+        $this->dataLabelsFromArray($array);
     }
 }
diff --git a/src/Models/HasDataLabels.php b/src/Models/HasDataLabels.php
new file mode 100644
index 0000000..cdd055d
--- /dev/null
+++ b/src/Models/HasDataLabels.php
@@ -0,0 +1,55 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasDataLabels
+{
+    private $dataLabels;
+
+    public function setDataLabelsEnabled($enabled)
+    {
+        data_set($this->dataLabels, 'enabled', $enabled);
+
+        return $this;
+    }
+
+    public function withDataLabels()
+    {
+        data_set($this->dataLabels, 'enabled', true);
+
+        return $this;
+    }
+
+    public function withoutDataLabels()
+    {
+        data_set($this->dataLabels, 'enabled', false);
+
+        return $this;
+    }
+
+    protected function initDataLabels()
+    {
+        $this->dataLabels = $this->defaultDataLabels();
+    }
+
+    private function defaultDataLabels()
+    {
+        return [
+            'enabled' => false,
+        ];
+    }
+
+    protected function dataLabelsFromArray($array)
+    {
+        $this->dataLabels = data_get($array, 'dataLabels', $this->defaultDataLabels());
+    }
+
+    protected function dataLabelsToArray()
+    {
+        return [
+            'dataLabels' => $this->dataLabels,
+        ];
+    }
+}