From 1ee2784c595af762ed3c2e017f357ffdd14af7c4 Mon Sep 17 00:00:00 2001
From: Muhsin Shah C P <muhsinshah21@gmail.com>
Date: Tue, 1 Feb 2022 11:13:49 +0530
Subject: [PATCH] Added a toggle to hide axes of chart widget (#2053)

* Added option to enable and disable axis

* Resolved a typo
---
 frontend/src/Editor/Components/Chart.jsx           |  4 +++-
 frontend/src/Editor/Components/components.js       |  2 ++
 frontend/src/Editor/Inspector/Components/Chart.jsx | 13 +++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index 12396f7845..87a8732730 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -10,7 +10,7 @@ export const Chart = function Chart({ width, height, darkMode, properties, style
   const [loadingState, setLoadingState] = useState(false);
 
   const { padding, visibility, disabledState } = styles;
-  const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson } = properties;
+  const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson, showAxes } = properties;
 
   useEffect(() => {
     const loadingStateProperty = properties.loadingState;
@@ -56,12 +56,14 @@ export const Chart = function Chart({ width, height, darkMode, properties, style
       showline: true,
       color: fontColor,
       automargin: true,
+      visible: showAxes,
     },
     yaxis: {
       showgrid: showGridLines,
       showline: true,
       color: fontColor,
       automargin: true,
+      visible: showAxes,
     },
     margin: {
       l: padding,
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 5d2f64e98c..1c5a13f140 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -173,6 +173,7 @@ export const componentTypes = [
       data: { type: 'json', displayName: 'Data' },
       loadingState: { type: 'code', displayName: 'Loading State' },
       markerColor: { type: 'color', displayName: 'Marker color' },
+      showAxes: { type: 'toggle', displayName: 'Show axes' },
       showGridLines: { type: 'toggle', displayName: 'Show grid lines' },
       type: {
         type: 'select',
@@ -203,6 +204,7 @@ export const componentTypes = [
       properties: {
         title: { value: 'This title can be changed' },
         markerColor: { value: '#CDE1F8' },
+        showAxes: { value: true },
         showGridLines: { value: true },
         plotFromJson: { value: false },
         loadingState: { value: `{{false}}` },
diff --git a/frontend/src/Editor/Inspector/Components/Chart.jsx b/frontend/src/Editor/Inspector/Components/Chart.jsx
index b54bf9d6a2..5034b0f0fd 100644
--- a/frontend/src/Editor/Inspector/Components/Chart.jsx
+++ b/frontend/src/Editor/Inspector/Components/Chart.jsx
@@ -172,6 +172,19 @@ class Chart extends React.Component {
         });
       }
 
+      items.push({
+        title: 'Show axes',
+        children: renderElement(
+          component,
+          componentMeta,
+          paramUpdated,
+          dataQueries,
+          'showAxes',
+          'properties',
+          currentState
+        ),
+      });
+
       items.push({
         title: 'Show grid lines',
         children: renderElement(