diff --git a/.ncurc.json b/.ncurc.json
index 73b2bcc..b368d42 100644
--- a/.ncurc.json
+++ b/.ncurc.json
@@ -1,4 +1,4 @@
 {
     "upgrade": true,
-    "reject": ["@headlessui/react"]
+    "reject": ["@headlessui/react","@rspack/cli"]
 }
diff --git a/package.json b/package.json
index e1efa9d..ed6bc1f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "@tremor/react": "^3.11.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "recharts": "2.9.2",
+        "recharts": "2.9.3",
         "tailwind-merge": "^2.0.0",
         "tailwind-styled-components": "^2.2.0",
         "uno-js": "^3.57.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ec2809..f15e3f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ dependencies:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
   recharts:
-    specifier: 2.9.2
-    version: 2.9.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+    specifier: 2.9.3
+    version: 2.9.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
   tailwind-merge:
     specifier: ^2.0.0
     version: 2.0.0
@@ -1285,7 +1285,7 @@ packages:
       react-day-picker: 8.8.0(date-fns@2.30.0)(react@18.2.0)
       react-dom: 18.2.0(react@18.2.0)
       react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
-      recharts: 2.9.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+      recharts: 2.9.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
       tailwind-merge: 1.14.0
     transitivePeerDependencies:
       - prop-types
@@ -6172,8 +6172,8 @@ packages:
       decimal.js-light: 2.5.1
     dev: false
 
-  /recharts@2.9.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ig0zYgO5nUP/896GW16b9yy2sHIRW1AHB90x48hypFTSjjxQt/J9rPzlLJjgNupzJKEHPCwMi1VnvN/k20K45w==}
+  /recharts@2.9.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-B61sKrDlTxHvYwOCw8eYrD6rTA2a2hJg0avaY8qFI1ZYdHKvU18+J5u7sBMFg//wfJ/C5RL5+HsXt5e8tcJNLg==}
     engines: {node: '>=12'}
     peerDependencies:
       prop-types: ^15.6.0
diff --git a/sample/index.tsx b/sample/index.tsx
index 7564de5..42781d6 100644
--- a/sample/index.tsx
+++ b/sample/index.tsx
@@ -14,6 +14,7 @@ import {
     Blur,
     Burger,
     ChartBar,
+    ComposedLineChart,
     DataChart,
     ErrorBoundary,
     Footer,
@@ -198,10 +199,14 @@ const Application = () => {
                         <AwaitableMetric>{!loading ? '100%' : undefined}</AwaitableMetric>
                     </Card>
                     <Card>
-                        <Text>Metric 3</Text>
-                        <AwaitableMetric>{!loading ? '100%' : undefined}</AwaitableMetric>
+                        <PieChart
+                            rawData={loading ? undefined : chartData}
+                            dataCallback={(d) => Object.values(d).map((x: any) => ({ name: x.name, value: x.Value }))}
+                            legendFormatType='money'
+                        />
                     </Card>
                     <Card>
+                        <Text className='font-medium'>Line Chart</Text>
                         <DataChart
                             rawData={loading ? undefined : chartData}
                             dataCallback={identity}
@@ -223,12 +228,9 @@ const Application = () => {
                         />
                     </Card>
                     <Card className='h-96'>
-                        <Text className='font-medium'>Pie Chart</Text>
-                        <PieChart
-                            rawData={loading ? undefined : chartData}
-                            dataCallback={(d) => Object.values(d).map((x: any) => ({ name: x.name, value: x.Value }))}
-                            legendFormatType='money'
-                        />
+                        <Text className='font-medium'>Composited Chart</Text>
+                        <ComposedLineChart rawData={loading ? undefined : chartData} dataCallback={identity}
+                            lines={[{ dataKey: 'name', yAxisId: 'left' }]} />
                     </Card>
                     <Col numColSpan={3}>
                         <Card>
diff --git a/src/ChartBar/index.tsx b/src/ChartBar/index.tsx
index d491de2..975cdde 100644
--- a/src/ChartBar/index.tsx
+++ b/src/ChartBar/index.tsx
@@ -1,29 +1,18 @@
 import React, { ReactElement, useEffect, useState } from 'react';
-import {
-    Bar,
-    BarChart,
-    Brush,
-    Cell,
-    Legend,
-    ReferenceLine,
-    ResponsiveContainer,
-    Tooltip,
-    XAxis,
-    YAxis,
-} from 'recharts';
+import { Bar, BarChart, Brush, Cell, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { Color, Flex } from '@tremor/react';
 import { twMerge } from 'tailwind-merge';
 import objectHash from 'object-hash';
 import { constructCategoryColors } from '@tremor/react/dist/components/chart-elements/common/utils';
 import { colorPalette, themeColorRange } from '@tremor/react/dist/lib/theme';
-import ChartTooltip from '@tremor/react/dist/components/chart-elements/common/ChartTooltip';
 import { getColorClassNames } from '@tremor/react/dist/lib/utils';
 import { BaseColors } from '@tremor/react/dist/lib/constants';
-import ChartLegend from '@tremor/react/dist/components/chart-elements/common/ChartLegend';
 import { ChartComponent, LegendFormatType } from '../constants';
 import { NoData } from '../NoData';
-import { formatTicks, getValueFormatted } from '../utils';
+import { formatTicks } from '../utils';
 import { ChartBarShimmer } from '../ChartShimmers';
+import { ChartDecorators } from '../ChartCommon';
+import { tremorTwMerge } from '@tremor/react/dist/lib/tremorTwMerge';
 
 type XAxisPrimaryFormatter = {
     (input: string): string;
@@ -96,8 +85,7 @@ export const ChartBar = <T,>({
             {dataStore.length > 0 ? (
                 <ResponsiveContainer>
                     <BarChart data={dataStore} maxBarSize={barSize} onClick={onClickEvent}>
-                        {xAxis && !multiXAxis && <XAxis dataKey='name' />}
-                        {xAxis && multiXAxis && <XAxis dataKey='name' tickFormatter={multiXAxis.primary} />}
+                        {xAxis && <XAxis dataKey='name' tickFormatter={multiXAxis?.primary} />}
                         {xAxis && multiXAxis && (
                             <XAxis
                                 dataKey='name'
@@ -117,42 +105,23 @@ export const ChartBar = <T,>({
                             unit={unit}
                             allowDecimals={false}
                             width={70}
-                        />
-                        {refLineY && (
-                            <ReferenceLine
-                                y={refLineY.value}
-                                label={{
-                                    position: 'insideTopRight',
-                                    value: refLineY.label,
-                                    fontSize: 11,
-                                    offset: 7,
-                                }}
-                                stroke={refLineY.color}
-                            />
-                        )}
-                        <Tooltip
-                            wrapperStyle={{ outline: 'none' }}
-                            isAnimationActive={false}
-                            cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
-                            content={({ active, payload, label }) => (
-                                <ChartTooltip
-                                    active={active}
-                                    payload={payload}
-                                    label={label as string}
-                                    valueFormatter={(value: number) => getValueFormatted(value, legendFormatType)}
-                                    categoryColors={categoryColors}
-                                />
+                            className={tremorTwMerge(
+                                // common
+                                'text-tremor-label',
+                                // light
+                                'fill-tremor-content',
+                                // dark
+                                'dark:fill-dark-tremor-content',
                             )}
                         />
-                        {legend && (
-                            <Legend
-                                iconType='circle'
-                                height={legendHeight}
-                                content={({ payload }) =>
-                                    ChartLegend({ payload }, categoryColors, setLegendHeight, undefined, undefined)
-                                }
-                            />
-                        )}
+                        {ChartDecorators({
+                            refLineY,
+                            legendFormatType,
+                            categoryColors,
+                            legend,
+                            legendHeight,
+                            setLegendHeight,
+                        })}
                         {keys.map((property) =>
                             stacked ? (
                                 <Bar
diff --git a/src/DataChart/index.tsx b/src/DataChart/index.tsx
index a28fbc1..a507475 100644
--- a/src/DataChart/index.tsx
+++ b/src/DataChart/index.tsx
@@ -1,27 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import {
-    CartesianGrid,
-    Legend,
-    Line,
-    LineChart,
-    ReferenceLine,
-    ResponsiveContainer,
-    Tooltip,
-    XAxis,
-    YAxis,
-} from 'recharts';
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { Flex } from '@tremor/react';
 import { twMerge } from 'tailwind-merge';
-import ChartTooltip from '@tremor/react/dist/components/chart-elements/common/ChartTooltip';
 import { constructCategoryColors } from '@tremor/react/dist/components/chart-elements/common/utils';
 import { colorPalette, themeColorRange } from '@tremor/react/dist/lib/theme';
-import ChartLegend from '@tremor/react/dist/components/chart-elements/common/ChartLegend';
 import { getColorClassNames } from '@tremor/react/dist/lib/utils';
 import { tremorTwMerge } from '@tremor/react/dist/lib/tremorTwMerge';
 import { ChartComponent } from '../constants';
 import { NoData } from '../NoData';
-import { formatTicks, getValueFormatted } from '../utils';
+import { formatTicks } from '../utils';
 import { ChartLineShimmer } from '../ChartShimmers';
+import { ChartDecorators } from '../ChartCommon';
 
 export type DataChartSettings<TDataIn> = ChartComponent<TDataIn, Record<string, unknown>[]> & {
     legend?: boolean;
@@ -111,43 +100,14 @@ export const DataChart = <T,>({
                                 'dark:fill-dark-tremor-content',
                             )}
                         />
-                        {refLineY && (
-                            <ReferenceLine
-                                y={refLineY.value}
-                                label={{
-                                    position: 'insideTopRight',
-                                    value: refLineY.label,
-                                    fontSize: 11,
-                                    offset: 7,
-                                }}
-                                stroke={refLineY.color}
-                            />
-                        )}
-                        <Tooltip
-                            wrapperStyle={{ outline: 'none' }}
-                            isAnimationActive={false}
-                            cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
-                            content={({ active, payload, label }) => (
-                                <ChartTooltip
-                                    active={active}
-                                    payload={payload}
-                                    label={label as string}
-                                    valueFormatter={(value: number) => getValueFormatted(value, legendFormatType)}
-                                    categoryColors={categoryColors}
-                                />
-                            )}
-                            position={{ y: 0 }}
-                        />
-                        {legend && (
-                            <Legend
-                                iconType='circle'
-                                verticalAlign='top'
-                                height={legendHeight}
-                                content={({ payload }) =>
-                                    ChartLegend({ payload }, categoryColors, setLegendHeight, undefined, undefined)
-                                }
-                            />
-                        )}
+                        {ChartDecorators({
+                            refLineY,
+                            legendFormatType,
+                            categoryColors,
+                            legend,
+                            legendHeight,
+                            setLegendHeight,
+                        })}
                         {getChartSeries(dataStore).map((property: string, index: number) => (
                             <Line
                                 className={getColorClassNames(colors[index], colorPalette.text).strokeColor}