diff --git a/components/chart/area/area-chart.tsx b/components/chart/area/area-chart.tsx
index fc59fd5..e81e4a9 100644
--- a/components/chart/area/area-chart.tsx
+++ b/components/chart/area/area-chart.tsx
@@ -12,6 +12,7 @@ import {
   TooltipComponent
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
+import { parse, stringify } from 'zrender/lib/tool/color';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
 import { getAxis, valueAxisBoundsFromProps, categoryAxisBoundsFromProps } from '../axis';
@@ -38,6 +39,12 @@ echarts.use([
   LineChart,
 ]);
 
+const applyOpacity = (colorStr: string, opacity: number) => {
+  const rgba = parse(colorStr);
+  if (!rgba) return colorStr;
+  return stringify([rgba[0], rgba[1], rgba[2], opacity], 'rgba');
+};
+
 const ChartComponent = ({
   data,
   width = 220,
@@ -308,11 +315,9 @@ const ChartComponent = ({
       const seriesColor = theme.series[index % theme.series.length].color;
       const seriesLineWidth = theme.series[index]?.lineWidth ?? theme.series[0].lineWidth ?? 2;
       
-      // Convert opacity (0-1) to hex (00-FF)
-      const opacityHex = Math.round(areaOpacity * 255).toString(16).padStart(2, '0');
-      const colorWithOpacity = seriesColor + opacityHex;
-      const transparentColor = seriesColor + '00';
-      const solidColor = seriesColor + 'ff';
+      const colorWithOpacity = applyOpacity(seriesColor, areaOpacity);
+      const transparentColor = applyOpacity(seriesColor, 0);
+      const solidColor = applyOpacity(seriesColor, 1);
       
       const areaStyleConfig =
         areaFill === 'gradient'