diff --git a/src/components/d3/functions.ts b/src/components/d3/functions.ts
new file mode 100644
index 0000000..3df51bd
--- /dev/null
+++ b/src/components/d3/functions.ts
@@ -0,0 +1,19 @@
+import { range } from 'd3'
+
+import { MinMax } from './types'
+
+export const getChartClass = (key: string | number) => `chart-id-${key}`
+export const getGroupClass = (key: string | number) => `group-id-${key}`
+
+export const getByAccessor = <DataType extends Record<any, any>, R>(accessor: keyof DataType | ((d: DataType) => R)): ((d: DataType) => R) => {
+    if (typeof accessor === 'function')
+        return accessor
+    return (d) => d[accessor]
+}
+
+export const getTicks = (domain: MinMax, count: number) => {
+    const min = domain.min ?? 0
+    const max = domain.max ?? 0
+    const step = (max - min) / count
+    return [...range(min, max, step), max]
+}
diff --git a/src/components/d3/types.ts b/src/components/d3/types.ts
index 084d3a4..65cbd0b 100644
--- a/src/components/d3/types.ts
+++ b/src/components/d3/types.ts
@@ -5,9 +5,11 @@ import {
     D3TooltipSettings
 } from './plugins'
 
+export type AxisAccessor<DataType extends Record<string, any>> = keyof DataType | ((d: DataType) => any)
+
 export type ChartAxis<DataType> = {
     type: 'linear' | 'time',
-    accessor: keyof DataType | ((d: DataType) => any)
+    accessor: AxisAccessor<DataType>
     unit?: ReactNode
     format?: (v: d3.NumberValue) => ReactNode
 }
@@ -47,6 +49,15 @@ export type AreaChartDataset = {
     optimization?: boolean
 }
 
+export type RectArea<DataType extends Record<string, number>> = {
+    type: 'rect_area'
+    minXAccessor?: AxisAccessor<DataType>
+    maxXAccessor?: AxisAccessor<DataType>
+    minYAccessor?: AxisAccessor<DataType>
+    maxYAccessor?: AxisAccessor<DataType>
+    data?: DataType[]
+}
+
 export type LineChartDataset = {
     type: 'line'
     nullValues?: 'skip' | 'gap' | 'none'
@@ -61,12 +72,15 @@ export type ChartDataset<DataType> = BaseChartDataset<DataType> & (
     AreaChartDataset |
     LineChartDataset |
     NeedleChartDataset |
-    PointChartDataset
+    PointChartDataset |
+    RectArea<Record<string, any>>
 )
 
+export type MinMax = { min?: number, max?: number }
+
 export type ChartDomain = {
-    x: { min?: number, max?: number }
-    y: { min?: number, max?: number }
+    x?: MinMax
+    y?: MinMax
 }
 
 export type ChartOffset = {
@@ -76,14 +90,17 @@ export type ChartOffset = {
     right: number
 }
 
+export type ChartTick<DataType> = {
+    visible?: boolean,
+    count?: number | d3.TimeInterval,
+    format?: (d: d3.NumberValue, idx: number, data?: DataType) => string,
+    color?: Property.Color
+}
+
 export type ChartTicks<DataType> = {
     color?: Property.Color
-    x?: {
-        visible?: boolean,
-        count?: number,
-        format?: (d: d3.NumberValue) => string,
-    }
-    y?: { visible?: boolean, count?: number }
+    x?: ChartTick<DataType>
+    y?: ChartTick<DataType>
 }
 
 export type ChartRegistry<DataType> = ChartDataset<DataType> & {