From 9d1f23f40a5b1a267bae68c48486c82e0f1e3360 Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Tue, 1 Jul 2025 14:33:10 +0530
Subject: [PATCH] Added chart border property and removed white background
 color

---
 .../src/AppBuilder/WidgetManager/widgets/chart.js  | 10 ++++++++++
 frontend/src/Editor/Components/Chart.jsx           | 14 ++++++++------
 .../modules/apps/services/widget-config/chart.js   | 10 ++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
index 66b5b21e98..d93ca2f2e6 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/chart.js
@@ -138,6 +138,15 @@ export const chartConfig = {
       displayName: 'Background color',
       validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
     },
+    borderColor: {
+      type: 'colorSwatches',
+      displayName: 'Border color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-default-border)',
+      },
+      accordian: 'container',
+    },
     padding: {
       type: 'code',
       displayName: 'Padding',
@@ -233,6 +242,7 @@ export const chartConfig = {
       borderRadius: { value: '{{4}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      borderColor: { value: 'var(--cc-default-border)' },
     },
   },
 };
diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index 54a6114674..151b9f9c7b 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -8,7 +8,7 @@ import { isEqual } from 'lodash';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
-import { getCssVarValue } from './utils';
+import { getCssVarValue, getModifiedColor } from './utils';
 
 var tinycolor = require('tinycolor2');
 
@@ -33,11 +33,11 @@ export const Chart = function Chart({
     return '#fff';
   };
 
-  const { padding, visibility, disabledState, boxShadow, backgroundColor, borderRadius } = styles;
+  const { padding, visibility, disabledState, boxShadow, backgroundColor, borderRadius, borderColor } = styles;
   const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson, showAxes, barmode } =
     properties;
 
-  const modifiedBackgroundColor = getCssVarValue(document.documentElement, backgroundColor);
+  const modifiedBackgroundColor = getModifiedColor(backgroundColor, 0);
   const modifiedMarkerColor = getCssVarValue(document.documentElement, markerColor);
   const modifiedGridLines = getCssVarValue(document.documentElement, 'var(--cc-weak-border)');
   const modifiedTextColor = getCssVarValue(document.documentElement, 'var(--cc-primary-text)');
@@ -55,7 +55,8 @@ export const Chart = function Chart({
     width: width - 4,
     height,
     display: visibility ? '' : 'none',
-    background: darkMode ? '#1f2936' : 'white',
+    // background: darkMode ? '#1f2936' : 'white',
+    border: `1px solid ${borderColor}`,
     boxShadow,
     borderRadius,
   };
@@ -82,6 +83,7 @@ export const Chart = function Chart({
       ? '#1f2936'
       : '#fff'
     : modifiedBackgroundColor;
+
   const fontColor = getColor(updatedBgColor);
 
   const chartTitle = plotFromJson ? chartLayout?.title ?? title : title;
@@ -105,8 +107,8 @@ export const Chart = function Chart({
   }, [JSON.stringify(chartLayout, chartTitle)]);
 
   const layout = {
-    width: width - 4,
-    height,
+    width: width - 6,
+    height: height - 4,
     plot_bgcolor: updatedBgColor,
     paper_bgcolor: updatedBgColor,
     title: {
diff --git a/server/src/modules/apps/services/widget-config/chart.js b/server/src/modules/apps/services/widget-config/chart.js
index 66b5b21e98..d93ca2f2e6 100644
--- a/server/src/modules/apps/services/widget-config/chart.js
+++ b/server/src/modules/apps/services/widget-config/chart.js
@@ -138,6 +138,15 @@ export const chartConfig = {
       displayName: 'Background color',
       validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
     },
+    borderColor: {
+      type: 'colorSwatches',
+      displayName: 'Border color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'var(--cc-default-border)',
+      },
+      accordian: 'container',
+    },
     padding: {
       type: 'code',
       displayName: 'Padding',
@@ -233,6 +242,7 @@ export const chartConfig = {
       borderRadius: { value: '{{4}}' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
+      borderColor: { value: 'var(--cc-default-border)' },
     },
   },
 };