small charts fixes

js/app/charts.js

@@ -85,6 +85,7 @@ if (window.Apex) {
 
     plotOptions: {
       pie: {
+        customScale: 1,
         expandOnClick: false,
         dataLabels: {
           offset: -8,
@@ -96,6 +97,7 @@ if (window.Apex) {
     stroke: {
       width: 2,
       curve: 'smooth',
+      lineCap: "round",
     },
 
     fill: {
@@ -126,11 +128,16 @@ if (window.Apex) {
     },
 
     title: {
+      margin: 0,
       style: {
         fontSize: '14px',
       }
     },
 
+    subtitle: {
+      margin: 0,
+    },
+
     tooltip: {
       fillSeriesColor: false
     },

pages/_data/charts.yml

@@ -235,6 +235,7 @@ pie:
   type: pie
   hide-legend: true
   show-data-labels: true
+  sparkline: true
   series:
     - name: A
       color: blue-darker

pages/_includes/js/charts.html

@@ -5,11 +5,12 @@
 <script>
 $(document).ready(function(){
    window.chart = window.chart || {};
-
-   window.ApexCharts && (window.chart["{{ include.chart-id }}"] = new ApexCharts(document.getElementById('{{ include.id }}'), {
+   
+   var el;
+   window.ApexCharts && (window.chart["{{ include.chart-id }}"] = new ApexCharts((el = document.getElementById('{{ include.id }}')), {
       chart: {
          type: '{{ data.type }}',
-         height: document.getElementById('{{ include.id }}').offsetHeight,
+         height: el.offsetHeight,
          {% if data.sparkline %}
          sparkline: {
             enabled: true
@@ -49,6 +50,12 @@ $(document).ready(function(){
       {% endif %}
       {% endif %}
 
+      {% if data.type == 'pie' or data.type == 'donut' %}
+      pie: {
+         height: el.offsetHeight
+      },
+      {% endif %}
+
       {% if data.show-grid %}
       grid: {
          show: true,