diff --git a/statchart/src/StatChartBase.tsx b/statchart/src/StatChartBase.tsx
index 57efc90f..e1e3d4ae 100644
--- a/statchart/src/StatChartBase.tsx
+++ b/statchart/src/StatChartBase.tsx
@@ -125,7 +125,7 @@ export const StatChartBase: FC<StatChartProps> = (props) => {
 
       const clonedSparkLine = { ...sparkline };
       if (colorMode === 'background_solid') {
-        clonedSparkLine.areaStyle = { color: WHITE_COLOR_CODE, opacity: 0.4 };
+        clonedSparkLine.areaStyle = { color: WHITE_COLOR_CODE, opacity: chartsTheme.sparkline.areaOpacity };
         clonedSparkLine.lineStyle = { color: WHITE_COLOR_CODE, opacity: 1 };
       }
 
diff --git a/statchart/src/stat-chart-model.ts b/statchart/src/stat-chart-model.ts
index a44d20bd..018e0cca 100644
--- a/statchart/src/stat-chart-model.ts
+++ b/statchart/src/stat-chart-model.ts
@@ -64,6 +64,7 @@ export interface StatChartOptions {
 export interface StatChartSparklineOptions {
   color?: string;
   width?: number;
+  areaOpacity?: number;
 }
 
 export type StatChartOptionsEditorProps = OptionsEditorProps<StatChartOptions>;
diff --git a/statchart/src/utils/data-transform.test.ts b/statchart/src/utils/data-transform.test.ts
index e3a6f94b..1042f525 100644
--- a/statchart/src/utils/data-transform.test.ts
+++ b/statchart/src/utils/data-transform.test.ts
@@ -67,6 +67,7 @@ describe('getStatChartColor', () => {
 describe('convertSparkline', () => {
   const sparkline: StatChartSparklineOptions = {
     color: 'purple',
+    areaOpacity: 0.2,
   };
 
   it('should render charts theme default threshold color', () => {
@@ -81,6 +82,7 @@ describe('convertSparkline', () => {
     const options = convertSparkline(testChartsTheme, defaultColor, sparkline) as LineSeriesOption;
     expect(options.lineStyle?.color).toEqual(defaultColor);
     expect(options.areaStyle?.color).toEqual(defaultColor);
+    expect(options.areaStyle?.opacity).toEqual(0.2);
   });
 
   it('should render orange if value meets the threshold', () => {
diff --git a/statchart/src/utils/data-transform.ts b/statchart/src/utils/data-transform.ts
index 1f1862e2..ecb70e5f 100644
--- a/statchart/src/utils/data-transform.ts
+++ b/statchart/src/utils/data-transform.ts
@@ -30,7 +30,7 @@ export function convertSparkline(
     },
     areaStyle: {
       color,
-      opacity: 0.4,
+      opacity: sparkline.areaOpacity ?? chartsTheme.sparkline.areaOpacity,
     },
   };
 }