diff --git a/modules/charts_highcharts/src/Plugin/chart/Library/Highcharts.php b/modules/charts_highcharts/src/Plugin/chart/Library/Highcharts.php
index 89cbb8eef..6e82f2ae3 100755
--- a/modules/charts_highcharts/src/Plugin/chart/Library/Highcharts.php
+++ b/modules/charts_highcharts/src/Plugin/chart/Library/Highcharts.php
@@ -169,6 +169,11 @@ public function preRender(array $element) {
     $chart_definition = $this->populateData($element, $chart_definition);
 
     // Remove machine names from series. Highcharts series must be an array.
+    if ($element['#chart_type'] === 'donut') {
+      $innersize = $chart_definition['series']['innerSize'];
+      unset($chart_definition['series']['innerSize']);
+    }
+
     $series = array_values($chart_definition['series']);
     unset($chart_definition['series']);
 
@@ -176,7 +181,15 @@ public function preRender(array $element) {
     ChartElement::trimArray($chart_definition);
 
     // Put back the data.
-    $chart_definition['series'] = $series;
+    if ($element['#chart_type'] === 'donut') {
+      $chart_definition['series'][] = [
+        'innerSize' => $innersize,
+        'data' => $series
+      ];
+    }
+    else {
+      $chart_definition['series'] = $series;
+    }
 
     if (!isset($element['#id'])) {
       $element['#id'] = Html::getUniqueId('highchart-render');
@@ -256,6 +269,10 @@ private function populateOptions(array $element, array $chart_definition) {
       $chart_definition['tooltip']['pointFormat'] = '<b>{point.y} ({point.percentage:.1f}%)</b><br/>';
     }
 
+    if ($element['#chart_type'] === 'donut') {
+      $chart_definition['plotOptions']['pie']['dataLabels']['format'] = '<b>{point.name}<br/>{point.percentage:.1f}%</b>';
+    }
+
     if ($element['#legend'] === TRUE) {
       $chart_definition['legend']['enabled'] = $element['#legend'];
       if (in_array($element['#chart_type'], ['pie', 'donut', 'gauge'])) {
@@ -392,7 +409,7 @@ private function populateData(array &$element, array $chart_definition) {
         $series['type'] = $element[$key]['#chart_type'];
         if ($element['#chart_type'] === 'donut') {
           // Add innerSize to differentiate between donut and pie.
-          $series['innerSize'] = '40%';
+          $chart_definition['series']['innerSize'] = '40%';
         }
         $series['name'] = $element[$key]['#title'];
         $series['color'] = $element[$key]['#color'];
@@ -420,6 +437,9 @@ private function populateData(array &$element, array $chart_definition) {
         if (!empty($element['#alternative_scatter'])) {
           $series = $series_data;
         }
+        elseif ($element['#chart_type'] === 'donut') {
+          $series['y'] = $series_data[0][1];
+        }
         else {
           $series['data'] = $series_data;
         }