From 16df55f4d827c3e79d3d217859fa5b6676cbfa78 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Tue, 21 Sep 2021 18:01:36 +0200
Subject: [PATCH] Client - update chart style

---
 .../src/components/Common/StatsChart/Chart.vue      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/fittrackee_client/src/components/Common/StatsChart/Chart.vue b/fittrackee_client/src/components/Common/StatsChart/Chart.vue
index 8c1a695d..3830cc1d 100644
--- a/fittrackee_client/src/components/Common/StatsChart/Chart.vue
+++ b/fittrackee_client/src/components/Common/StatsChart/Chart.vue
@@ -5,7 +5,13 @@
 </template>
 
 <script lang="ts">
-  import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+  import {
+    Chart,
+    ChartData,
+    ChartOptions,
+    LayoutItem,
+    registerables,
+  } from 'chart.js'
   import ChartDataLabels from 'chartjs-plugin-datalabels'
   import { ComputedRef, PropType, computed, defineComponent } from 'vue'
   import { BarChart, useBarChart } from 'vue-chart-3'
@@ -54,6 +60,7 @@
       const options = computed<ChartOptions<'bar'>>(() => ({
         responsive: true,
         maintainAspectRatio: true,
+        animation: false,
         layout: {
           padding: {
             top: 22,
@@ -72,10 +79,14 @@
               drawOnChartArea: false,
             },
             ticks: {
+              maxTicksLimit: 6,
               callback: function (value) {
                 return formatTooltipValue(props.displayedData, +value, false)
               },
             },
+            afterFit: function (scale: LayoutItem) {
+              scale.width = 60
+            },
           },
         },
         plugins: {