From 0869fb06fb2921a353bfc41d980d55bf06048d23 Mon Sep 17 00:00:00 2001
From: Muhsin Shah C P <muhsinshah21@gmail.com>
Date: Mon, 31 Jan 2022 21:47:33 +0530
Subject: [PATCH] Adds padding property to charts widget (#2029)

* added padding property to charts widget

* working on padding problem

* Changed default padding value
---
 frontend/src/Editor/Components/Chart.jsx     | 10 +++++++++-
 frontend/src/Editor/Components/components.js |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index 383832220c..12396f7845 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -9,7 +9,7 @@ const Plot = createPlotlyComponent(Plotly);
 export const Chart = function Chart({ width, height, darkMode, properties, styles }) {
   const [loadingState, setLoadingState] = useState(false);
 
-  const { visibility, disabledState } = styles;
+  const { padding, visibility, disabledState } = styles;
   const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson } = properties;
 
   useEffect(() => {
@@ -55,11 +55,19 @@ export const Chart = function Chart({ width, height, darkMode, properties, style
       showgrid: showGridLines,
       showline: true,
       color: fontColor,
+      automargin: true,
     },
     yaxis: {
       showgrid: showGridLines,
       showline: true,
       color: fontColor,
+      automargin: true,
+    },
+    margin: {
+      l: padding,
+      r: padding,
+      b: padding,
+      t: padding,
     },
   };
 
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 09a028fac7..5d2f64e98c 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -188,6 +188,7 @@ export const componentTypes = [
     },
     events: {},
     styles: {
+      padding: { type: 'code', displayName: 'Padding' },
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },
@@ -235,6 +236,7 @@ export const componentTypes = [
       },
       events: [],
       styles: {
+        padding: { value: '50' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },