diff --git a/charts.api.php b/charts.api.php
index fd26b7484dc33d405faa8de23bf891f7a4e45abf..cdd8c6ac5d2dfb60ebe428ae28d9df7d06acdd35 100644
--- a/charts.api.php
+++ b/charts.api.php
@@ -131,7 +131,7 @@ function hook_charts_info() {
     // $chart renderable and printing a chart on the page.
     'render' => '_my_charting_library_render',
     // Specify the chart types your library is capable of providing.
-    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
+    'types' => ['area', 'bar', 'column', 'donut', 'line', 'pie', 'scatter'],
     // If your callback function is in a separate file, specify it's location.
     // 'file' => 'includes/my_charting_library.inc',
   ];
diff --git a/modules/charts_api_example/src/Controller/ChartsApiExample.php b/modules/charts_api_example/src/Controller/ChartsApiExample.php
index b3e896d911e79f00de3c0259268ae4843a2b706a..a6350ce2d64bc9430dbb9666478495941a941c7f 100644
--- a/modules/charts_api_example/src/Controller/ChartsApiExample.php
+++ b/modules/charts_api_example/src/Controller/ChartsApiExample.php
@@ -18,6 +18,10 @@ class ChartsApiExample extends ControllerBase implements ContainerInjectionInter
   public function display() {
 
     $library = $this->chartSettings['library'];
+    if (!isset($library)) {
+      drupal_set_message('You need to first configure Charts default 
+      settings');
+    }
     $options = [];
     $options['type'] = $this->chartSettings['type'];
     $options['title'] = $this->t('Chart title');
@@ -25,7 +29,7 @@ class ChartsApiExample extends ControllerBase implements ContainerInjectionInter
     $options['yaxis_min'] = '';
     $options['yaxis_max'] = '';
     $options['xaxis_title'] = $this->t('X-Axis');
-    //sample data format
+    // Sample data format.
     $categories = ["Category 1", "Category 2", "Category 3", "Category 4"];
     $seriesData = [
       ["name" => "Series 1", "color" => "#0d233a", "type" => null, "data" => [250, 350, 400, 200]],
diff --git a/modules/charts_c3/charts_c3.module b/modules/charts_c3/charts_c3.module
index 8d9928521c62897a41d4a14027ba19c8ee8cd72e..45469508b0c10089adec04073cf6e3cbd21de5ac 100644
--- a/modules/charts_c3/charts_c3.module
+++ b/modules/charts_c3/charts_c3.module
@@ -13,7 +13,7 @@ use Drupal\charts\Theme\ChartsInterface;
 function charts_c3_charts_info() {
   $info['c3'] = [
     'label' => t('C3 Charts'),
-    'types' => ['area', 'bar', 'column', 'line', 'pie', 'donut', 'scatter'],
+    'types' => ['area', 'bar', 'column', 'donut', 'line', 'pie', 'donut', 'scatter'],
   ];
   return $info;
 }
diff --git a/modules/charts_google/charts_google.module b/modules/charts_google/charts_google.module
index 64f95c09123a15cb8847df003b04e2d8fb96b5ed..50aa6c190cc3ef01d5fd4473ae3564afefe967ea 100644
--- a/modules/charts_google/charts_google.module
+++ b/modules/charts_google/charts_google.module
@@ -5,9 +5,7 @@
  * Charts module integration with Google Charts library.
  */
 
-use Drupal\charts_google\Settings\Google\GoogleOptions;
-use Drupal\charts_google\Settings\Google\ChartType;
-use Drupal\charts_google\Settings\Google\ChartArea;
+use Drupal\charts\Theme\ChartsInterface;
 
 /**
  * Implements hook_charts_info().
@@ -16,10 +14,19 @@ function charts_google_charts_info() {
   $info['google'] = [
     'label' => t('Google Charts'),
     'render' => '_charts_google_render',
-    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
+    'types' => ['area', 'bar', 'column', 'donut', 'line', 'pie', 'scatter'],
     'file' => 'charts_google.inc',
   ];
   return $info;
 }
 
-
+/**
+ * Implements hook_charts_type_info().
+ */
+function charts_google_charts_type_info() {
+  $chart_types['donut'] = [
+    'label' => t('Donut'),
+    'axis' => ChartsInterface::CHARTS_SINGLE_AXIS,
+  ];
+  return $chart_types;
+}
diff --git a/modules/charts_google/js/charts_google.js b/modules/charts_google/js/charts_google.js
index e866f571e6c891c2cc771f4e923ed7e7c0b3f08b..20413e21b3ef6091a1f6d034ecf8b7751d5d613b 100644
--- a/modules/charts_google/js/charts_google.js
+++ b/modules/charts_google/js/charts_google.js
@@ -33,6 +33,9 @@
               case 'ColumnChart':
                 chart = new google.visualization.ColumnChart(document.getElementById(chartId));
                 break;
+              case 'DonutChart':
+                chart = new google.visualization.PieChart(document.getElementById(chartId));
+                break;
               case 'PieChart':
                 chart = new google.visualization.PieChart(document.getElementById(chartId));
                 break;
diff --git a/modules/charts_google/src/Charts/GoogleChartsRender.php b/modules/charts_google/src/Charts/GoogleChartsRender.php
index df6a0c99292935c3a0fda0a1e604b90876458b5e..a707daeda25fe4bafee43c1ebb57e248a7f4682e 100644
--- a/modules/charts_google/src/Charts/GoogleChartsRender.php
+++ b/modules/charts_google/src/Charts/GoogleChartsRender.php
@@ -94,11 +94,14 @@ class GoogleChartsRender implements ChartsRenderInterface {
     }
     $googleOptions->setTitle($options['title']);
     $googleOptions->vAxes = $vAxes;
-    //$vAxis['title'] = $options['yaxis_title'];
-    //$googleOptions->setVAxis($vAxis);
+
+    if (in_array('donut',$chartSelected)) {
+      $googleOptions->pieHole = '0.5';
+    }
+
     $chartArea = new ChartArea();
     $chartArea->setWidth(400);
-    // $googleOptions->setChartArea($chartArea);
+
     $seriesColors = [];
     for ($i = 0; $i < count($seriesData); $i++) {
       $seriesColor = $seriesData[$i]['color'];
diff --git a/modules/charts_highcharts/charts_highcharts.module b/modules/charts_highcharts/charts_highcharts.module
index 3e24bb7b6277d34b5d4cbc6dd2bc11ed94f15773..1861f5aa21d3255b803fd6c586d79aa28b0e02d6 100644
--- a/modules/charts_highcharts/charts_highcharts.module
+++ b/modules/charts_highcharts/charts_highcharts.module
@@ -4,6 +4,8 @@
  * Charts module integration with Highcharts library.
  */
 
+use Drupal\charts\Theme\ChartsInterface;
+
 /**
  * Implements hook_charts_info().
  */
@@ -11,9 +13,20 @@ function charts_highcharts_charts_info() {
   $info['highcharts'] = [
     'label' => t('Highcharts'),
     'render' => '_charts_highcharts_render',
-    'types' => ['area', 'bar', 'column', 'line', 'pie', 'scatter'],
+    'types' => ['area', 'bar', 'column', 'donut', 'line', 'pie', 'scatter'],
     'file' => 'charts_highcharts.inc',
   ];
 
   return $info;
 }
+
+/**
+ * Implements hook_charts_type_info().
+ */
+function charts_highcharts_charts_type_info() {
+  $chart_types['donut'] = [
+    'label' => t('Donut'),
+    'axis' => ChartsInterface::CHARTS_SINGLE_AXIS,
+  ];
+  return $chart_types;
+}
diff --git a/modules/charts_highcharts/src/Charts/HighchartsChartsRender.php b/modules/charts_highcharts/src/Charts/HighchartsChartsRender.php
index b442fb9f3de28ecceedac85421d70758b8b4a2aa..e2da14268a7a9a4788ebcea3b3598b26a6f909f0 100644
--- a/modules/charts_highcharts/src/Charts/HighchartsChartsRender.php
+++ b/modules/charts_highcharts/src/Charts/HighchartsChartsRender.php
@@ -38,9 +38,28 @@ class HighchartsChartsRender implements ChartsRenderInterface {
    * @return Highcharts object to be used by highcharts javascripts visualization framework
    */
   public function charts_render_charts($options, $categories = [], $seriesData = [], $attachmentDisplayOptions = [], &$variables, $chartId) {
+    $noAttachmentDisplays = count($attachmentDisplayOptions) === 0;
 
     $chart = new ChartType();
-    $chart->setType($options['type']);
+    $typeOptions = $options['type'];
+    // @todo: make this so that it happens if any display uses donut.
+    if ($typeOptions == 'donut'){
+      $typeOptions = 'pie';
+      // Remove donut from seriesData.
+      foreach ($seriesData as $key => &$value) {
+        $value = str_replace('donut','pie',$value);
+      }
+      // Add innerSize to differentiate between donut and pie.
+      foreach ($seriesData as $key => &$value) {
+        if ($typeOptions == 'pie') {
+          $innerSize['showInLegend'] = 'true';
+          $innerSize['innerSize'] = '40%';
+          $chartPlacement = array_search($value, $seriesData);
+          $seriesData[$chartPlacement] = array_merge($innerSize, $seriesData[$chartPlacement]);
+        }
+      }
+    }
+    $chart->setType($typeOptions);
     $chartTitle = new ChartTitle();
     $chartTitle->setText($options['title']);
     $chartXaxis = new Xaxis();
@@ -67,14 +86,13 @@ class HighchartsChartsRender implements ChartsRenderInterface {
     $chartYaxis->setTitle($yAxisTitle);
     array_push($yAxes, $chartYaxis);
     // Chart libraries tend to supports only one secondary axis.
-    if ($attachmentDisplayOptions[0]['inherit_yaxis'] == 0) {
+    if (!$noAttachmentDisplays && $attachmentDisplayOptions[0]['inherit_yaxis'] == 0) {
       $chartYaxisSecondary = new Yaxis();
       $yAxisTitleSecondary = new YaxisTitle();
       $yAxisTitleSecondary->setText($attachmentDisplayOptions[0]['style']['options']['yaxis_title']);
       $chartYaxisSecondary->setTitle($yAxisTitleSecondary);
       $chartYaxisSecondary->setLabels($yaxisLabels);
       $chartYaxisSecondary->opposite = 'true';
-
       if (!empty($attachmentDisplayOptions[0]['style']['options']['yaxis_min'])) {
         $chartYaxisSecondary->min = $attachmentDisplayOptions[0]['style']['options']['yaxis_min'];
       }
@@ -86,8 +104,8 @@ class HighchartsChartsRender implements ChartsRenderInterface {
     $dataLabelStatus = new DataLabelStatus();
     $dataLabels = new DataLabels();
     $dataLabels->setDataLabels($dataLabelStatus);
-    $barPlotOptns = new PlotOptions();
-    $barPlotOptns->setBar($dataLabels);
+    $plotOptions = new PlotOptions();
+    $plotOptions->setPlotType($dataLabels);
     $chartTooltip = new Tooltip();
     $chartCredits = new ChartCredits();
     $chartLegend = new ChartLegend();
@@ -96,10 +114,9 @@ class HighchartsChartsRender implements ChartsRenderInterface {
     $highchart->setChart($chart);
     $highchart->setTitle($chartTitle);
     $highchart->setXAxis($chartXaxis);
-    //$highchart->setYAxis($chartYaxis);
     $highchart->yAxis = $yAxes;
     $highchart->setTooltip($chartTooltip);
-    $highchart->setPlotOptions($barPlotOptns);
+    $highchart->setPlotOptions($plotOptions);
     $highchart->setCredits($chartCredits);
     $highchart->setLegend($chartLegend);
     $highchart->setSeries($seriesData);
diff --git a/modules/charts_highcharts/src/Settings/Highcharts/ChartType.php b/modules/charts_highcharts/src/Settings/Highcharts/ChartType.php
index b0260bd3626c762cd2d8f4108da36836cbe350ee..bebba6ffeae74dff3d7d2b1c1d08ca18b668dd8f 100644
--- a/modules/charts_highcharts/src/Settings/Highcharts/ChartType.php
+++ b/modules/charts_highcharts/src/Settings/Highcharts/ChartType.php
@@ -25,6 +25,10 @@ class ChartType implements \JsonSerializable {
   public function jsonSerialize() {
     $vars = get_object_vars($this);
 
+    if ($vars['type'] == 'pie' || $vars['type'] == 'donut') {
+      unset($vars['x']);
+    }
+
     return $vars;
   }
 
diff --git a/modules/charts_highcharts/src/Settings/Highcharts/Highcharts.php b/modules/charts_highcharts/src/Settings/Highcharts/Highcharts.php
index 9a6863b3394cf11efa608a094bc11dc29ac0986b..31c0081db1d7b2c618fe5105efaa4596fac388e0 100644
--- a/modules/charts_highcharts/src/Settings/Highcharts/Highcharts.php
+++ b/modules/charts_highcharts/src/Settings/Highcharts/Highcharts.php
@@ -11,6 +11,8 @@ class Highcharts implements \JsonSerializable {
   private $plotOptions;
   private $legend;
   private $credits;
+  private $innerSize = '%20';
+  private $series;
 
   /**
    * @return mixed
@@ -124,6 +126,20 @@ class Highcharts implements \JsonSerializable {
     $this->credits = $credits;
   }
 
+  /**
+   * @return mixed
+   */
+  public function getInnerSize() {
+    return $this->innerSize;
+  }
+
+  /**
+   * @param mixed $innerSize
+   */
+  public function setInnerSize($innerSize) {
+    $this->innerSize = $innerSize;
+  }
+
   /**
    * @return mixed
    */
@@ -138,8 +154,6 @@ class Highcharts implements \JsonSerializable {
     $this->series = $series;
   }
 
-  private $series;
-
   /**
    * @return array
    */
diff --git a/modules/charts_highcharts/src/Settings/Highcharts/PlotOptions.php b/modules/charts_highcharts/src/Settings/Highcharts/PlotOptions.php
index cf1d8a7d6d2782dec72fb586f31ec36948c86707..58d46df1f8f1d8c6db520f1c4f64962a0b925852 100644
--- a/modules/charts_highcharts/src/Settings/Highcharts/PlotOptions.php
+++ b/modules/charts_highcharts/src/Settings/Highcharts/PlotOptions.php
@@ -3,20 +3,20 @@
 namespace Drupal\charts_highcharts\Settings\Highcharts;
 
 class PlotOptions implements \JsonSerializable {
-  private $bar;
+  private $plotType;
 
   /**
    * @return mixed
    */
-  public function getBar() {
-    return $this->bar;
+  public function getPlotType() {
+    return $this->plotType;
   }
 
   /**
-   * @param mixed $bar
+   * @param mixed $plotType
    */
-  public function setBar($bar) {
-    $this->bar = $bar;
+  public function setPlotType($plotType) {
+    $this->plotType = $plotType;
   }
 
   /**