diff --git a/packages/f2/src/components/axis/rect/bottom.tsx b/packages/f2/src/components/axis/rect/bottom.tsx
index 779a2bc45..4223b4656 100644
--- a/packages/f2/src/components/axis/rect/bottom.tsx
+++ b/packages/f2/src/components/axis/rect/bottom.tsx
@@ -9,6 +9,7 @@ export default (props: RectProps<'bottom'>, context) => {
   const { grid, tickLine, line, labelOffset, label, symbol } = style;
   const filterTicks = ticks.filter((d) => !isNaN(d.value));
   const symbols = isArray(symbol) ? symbol : [symbol];
+  const { length: tickLineLength, ...tickLineStyle } = tickLine || {};
 
   return (
     <group>
@@ -19,8 +20,8 @@ export default (props: RectProps<'bottom'>, context) => {
             const end = points[points.length - 1];
             return (
               <line
-                key={tickValue}
-                attrs={{
+                key={`grid-${tickValue}`}
+                style={{
                   x1: start.x,
                   y1: start.y,
                   x2: end.x,
@@ -32,19 +33,19 @@ export default (props: RectProps<'bottom'>, context) => {
             );
           })
         : null}
-      {tickLine && tickLine.length
+      {tickLineLength
         ? filterTicks.map((tick) => {
             const { points, tickValue } = tick;
             const start = points[0];
             return (
               <line
-                key={tickValue}
-                attrs={{
+                key={`tickLine-${tickValue}`}
+                style={{
                   x1: start.x,
                   y1: start.y,
                   x2: start.x,
-                  y2: start.y + px2hd(tickLine.length),
-                  ...tickLine,
+                  y2: start.y + px2hd(tickLineLength),
+                  ...tickLineStyle,
                 }}
               />
             );
@@ -64,7 +65,7 @@ export default (props: RectProps<'bottom'>, context) => {
       ) : null}
       {line ? (
         <line
-          attrs={{
+          style={{
             x1: left,
             y1: bottom,
             x2: right,
@@ -113,8 +114,8 @@ export default (props: RectProps<'bottom'>, context) => {
 
             return (
               <text
-                key={tickValue}
-                attrs={textAttrs}
+                key={`text-${tickValue}`}
+                style={textAttrs}
                 animation={
                   animation || {
                     appear: {
diff --git a/packages/f2/src/components/axis/rect/left.tsx b/packages/f2/src/components/axis/rect/left.tsx
index 8a46d8779..f2f2b53c2 100644
--- a/packages/f2/src/components/axis/rect/left.tsx
+++ b/packages/f2/src/components/axis/rect/left.tsx
@@ -2,12 +2,14 @@ import { jsx } from '@antv/f-engine';
 import { RectProps } from '../types';
 import { isArray } from '@antv/util';
 
-export default (props: RectProps) => {
+export default (props: RectProps, context) => {
   const { ticks: originTicks, coord, style, animation } = props;
+  const { px2hd } = context;
   const { left, top, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label, symbol } = style;
   const ticks = originTicks.filter((d) => !isNaN(d.value));
   const symbols = isArray(symbol) ? symbol : [symbol];
+  const { length: tickLineLength, ...tickLineStyle } = tickLine || {};
 
   return (
     <group>
@@ -18,8 +20,8 @@ export default (props: RectProps) => {
             const end = points[points.length - 1];
             return (
               <line
-                key={tickValue}
-                attrs={{
+                key={`grid-${tickValue}`}
+                style={{
                   x1: start.x,
                   y1: start.y,
                   x2: end.x,
@@ -31,19 +33,19 @@ export default (props: RectProps) => {
             );
           })
         : null}
-      {tickLine && tickLine.length
+      {tickLineLength
         ? ticks.map((tick) => {
             const { points, tickValue } = tick;
             const start = points[0];
             return (
               <line
-                key={tickValue}
-                attrs={{
+                key={`tickLine-${tickValue}`}
+                style={{
                   x1: start.x,
                   y1: start.y,
-                  x2: start.x - tickLine.length,
+                  x2: start.x - px2hd(tickLineLength),
                   y2: start.y,
-                  ...tickLine,
+                  ...tickLineStyle,
                 }}
               />
             );
@@ -88,8 +90,8 @@ export default (props: RectProps) => {
             const start = points[0];
             return (
               <text
-                key={tickValue}
-                attrs={{
+                key={`text-${tickValue}`}
+                style={{
                   x: start.x - labelOffset,
                   y: start.y,
                   textAlign: 'right',
diff --git a/packages/f2/src/components/axis/rect/right.tsx b/packages/f2/src/components/axis/rect/right.tsx
index 25662f5e1..2db3f1f81 100644
--- a/packages/f2/src/components/axis/rect/right.tsx
+++ b/packages/f2/src/components/axis/rect/right.tsx
@@ -2,23 +2,26 @@ import { jsx } from '@antv/f-engine';
 import { isArray } from '@antv/util';
 import { RectProps } from '../types';
 
-export default (props: RectProps) => {
+export default (props: RectProps, context) => {
   const { ticks: originTicks, coord, style } = props;
+  const { px2hd } = context;
   const { top, right, bottom } = coord;
   const { grid, tickLine, line, labelOffset, label, symbol } = style;
   const ticks = originTicks.filter((d) => !isNaN(d.value));
   const symbols = isArray(symbol) ? symbol : [symbol];
+  const { length: tickLineLength, ...tickLineStyle } = tickLine || {};
 
   return (
     <group>
       {grid
         ? ticks.map((tick) => {
-            const { points, gridStyle } = tick;
+            const { points, tickValue, gridStyle } = tick;
             const start = points[0];
             const end = points[points.length - 1];
             return (
               <line
-                attrs={{
+                key={`grid-${tickValue}`}
+                style={{
                   x1: start.x,
                   y1: start.y,
                   x2: end.x,
@@ -30,18 +33,19 @@ export default (props: RectProps) => {
             );
           })
         : null}
-      {tickLine && tickLine.length
+      {tickLineLength
         ? ticks.map((tick) => {
-            const { points } = tick;
+            const { points, tickValue } = tick;
             const end = points[points.length - 1];
             return (
               <line
-                attrs={{
+                key={`tickLine-${tickValue}`}
+                style={{
                   x1: end.x,
                   y1: end.y,
-                  x2: end.x + tickLine.length,
+                  x2: end.x + px2hd(tickLineLength),
                   y2: end.y,
-                  ...tickLine,
+                  ...tickLineStyle,
                 }}
               />
             );
@@ -59,7 +63,7 @@ export default (props: RectProps) => {
       ) : null}
       {line ? (
         <line
-          attrs={{
+          style={{
             x1: right,
             y1: top,
             x2: right,
@@ -82,11 +86,12 @@ export default (props: RectProps) => {
       ) : null}
       {label
         ? ticks.map((tick, _index) => {
-            const { points, text, labelStyle } = tick;
+            const { tickValue, points, text, labelStyle } = tick;
             const end = points[points.length - 1];
             return (
               <text
-                attrs={{
+                key={`text-${tickValue}`}
+                style={{
                   x: end.x + labelOffset,
                   y: end.y,
                   textAlign: 'left',
diff --git a/packages/f2/src/components/axis/rect/top.tsx b/packages/f2/src/components/axis/rect/top.tsx
index 4c2994581..9cfcc8c14 100644
--- a/packages/f2/src/components/axis/rect/top.tsx
+++ b/packages/f2/src/components/axis/rect/top.tsx
@@ -2,23 +2,26 @@ import { isArray } from '@antv/util';
 import { jsx } from '@antv/f-engine';
 import { RectProps } from '../types';
 
-export default (props: RectProps) => {
+export default (props: RectProps, context) => {
   const { ticks: originTicks, coord, style } = props;
+  const { px2hd } = context;
   const { left, top, right } = coord;
   const { grid, tickLine, line, labelOffset, label, symbol } = style;
   const ticks = originTicks.filter((d) => !isNaN(d.value));
   const symbols = isArray(symbol) ? symbol : [symbol];
+  const { length: tickLineLength, ...tickLineStyle } = tickLine || {};
 
   return (
     <group>
       {grid
         ? ticks.map((tick) => {
-            const { points, gridStyle } = tick;
+            const { points, tickValue, gridStyle } = tick;
             const start = points[0];
             const end = points[points.length - 1];
             return (
               <line
-                attrs={{
+                key={`grid-${tickValue}`}
+                style={{
                   x1: start.x,
                   y1: start.y,
                   x2: end.x,
@@ -32,16 +35,17 @@ export default (props: RectProps) => {
         : null}
       {tickLine && tickLine.length
         ? ticks.map((tick) => {
-            const { points } = tick;
+            const { points, tickValue } = tick;
             const end = points[points.length - 1];
             return (
               <line
-                attrs={{
+                key={`tickLine-${tickValue}`}
+                style={{
                   x1: end.x,
                   y1: end.y,
                   x2: end.x,
-                  y2: end.y - tickLine.length,
-                  ...tickLine,
+                  y2: end.y - px2hd(tickLineLength),
+                  ...tickLineStyle,
                 }}
               />
             );
@@ -61,7 +65,7 @@ export default (props: RectProps) => {
       ) : null}
       {line ? (
         <line
-          attrs={{
+          style={{
             x1: left,
             y1: top,
             x2: right,
@@ -84,11 +88,12 @@ export default (props: RectProps) => {
       ) : null}
       {label
         ? ticks.map((tick, _index) => {
-            const { points, text, labelStyle } = tick;
+            const { tickValue, points, text, labelStyle } = tick;
             const end = points[points.length - 1];
             return (
               <text
-                attrs={{
+                key={`text-${tickValue}`}
+                style={{
                   x: end.x,
                   y: end.y - labelOffset,
                   textAlign: 'center',
diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png
index 02c6b278a..523b4a64c 100644
Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png differ
diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png
index a8b252f6d..879338cc4 100644
Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png differ
diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-3-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-3-snap.png
index b34c9579e..4c9c76290 100644
Binary files a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-3-snap.png and b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-3-snap.png differ
diff --git a/packages/f2/test/components/candlestick/pan.test.tsx b/packages/f2/test/components/candlestick/pan.test.tsx
index 2c811f3da..9a6169cd7 100644
--- a/packages/f2/test/components/candlestick/pan.test.tsx
+++ b/packages/f2/test/components/candlestick/pan.test.tsx
@@ -257,7 +257,18 @@ describe('candlestick', () => {
     const { props } = (
       <Canvas context={context} animate={false} pixelRatio={1}>
         <Chart data={data}>
-          <Axis field="time" type="timeCat" tickCount={3} />
+          <Axis
+            field="time"
+            type="timeCat"
+            tickCount={3}
+            style={{
+              tickLine: {
+                length: 10,
+                lineWidth: '10px',
+                stroke: 'red',
+              },
+            }}
+          />
           <Axis field="value" />
           <Candlestick x="time" y="value" />
           <ScrollBar mode="x" range={[0.3, 0.6]} swipe={true} swipeDuration={100} autoFit={true} />
@@ -279,9 +290,20 @@ describe('candlestick', () => {
     expect(context).toMatchImageSnapshot();
 
     const { props: nextProps } = (
-      <Canvas context={context} animate={false} pixelRatio={1}>
+      <Canvas context={context} animate={false} pixelRatio={2}>
         <Chart data={[].concat(data).slice(0, 30)}>
-          <Axis field="time" type="timeCat" tickCount={3} />
+          <Axis
+            field="time"
+            type="timeCat"
+            tickCount={3}
+            style={{
+              tickLine: {
+                length: 10,
+                lineWidth: '10px',
+                stroke: 'red',
+              },
+            }}
+          />
           <Axis field="value" />
           <Candlestick x="time" y="value" />
           <ScrollBar mode="x" range={[0.3, 0.8]} swipe={true} swipeDuration={100} autoFit={true} />