diff --git a/src/components/d3/renders/index.ts b/src/components/d3/renders/index.ts
index 3ba343e..4caba1d 100644
--- a/src/components/d3/renders/index.ts
+++ b/src/components/d3/renders/index.ts
@@ -2,3 +2,4 @@ export * from './area'
 export * from './line'
 export * from './needle'
 export * from './points'
+export * from './rect_area'
diff --git a/src/components/d3/renders/rect_area.ts b/src/components/d3/renders/rect_area.ts
new file mode 100644
index 0000000..8e25e94
--- /dev/null
+++ b/src/components/d3/renders/rect_area.ts
@@ -0,0 +1,37 @@
+import { getByAccessor } from '../functions'
+import { ChartRegistry } from '../types'
+
+export const renderRectArea = <DataType extends Record<string, any>>(
+    xAxis: (value: d3.NumberValue) => number,
+    yAxis: (value: d3.NumberValue) => number,
+    chart: ChartRegistry<DataType>
+) => {
+    if (
+        chart.type !== 'rect_area' ||
+        !chart.minXAccessor ||
+        !chart.maxXAccessor ||
+        !chart.minYAccessor ||
+        !chart.maxYAccessor ||
+        !chart.data
+    ) return
+
+    const data = chart.data
+    const xMin = getByAccessor(chart.minXAccessor)
+    const xMax = getByAccessor(chart.maxXAccessor)
+    const yMin = getByAccessor(chart.minYAccessor)
+    const yMax = getByAccessor(chart.maxYAccessor)
+
+    chart().attr('fill', 'currentColor')
+
+    const rects = chart().selectAll<SVGRectElement, null>('rect').data(data)
+
+    rects.exit().remove()
+    rects.enter().append('rect')
+    
+    const actualRects = chart()
+        .selectAll<SVGRectElement, Record<string, any>>('rect')
+        .attr('x1', (d) => xAxis(xMin(d)))
+        .attr('x2', (d) => xAxis(xMax(d)))
+        .attr('y1', (d) => yAxis(yMin(d)))
+        .attr('y2', (d) => yAxis(yMax(d)))
+}