fix(CartesianAxis): render the axis line when there are no ticks

src/cartesian/CartesianAxis.tsx

@@ -260,9 +260,9 @@ export class CartesianAxis extends Component<Props, IState> {
    * @param {Array} ticks The ticks to actually render (overrides what was passed in props)
    * @param {string} fontSize Fontsize to consider for tick spacing
    * @param {string} letterSpacing Letterspacing to consider for tick spacing
-   * @return {ReactComponent} renderedTicks
+   * @return {ReactElement | null} renderedTicks
    */
-  renderTicks(ticks: CartesianTickItem[], fontSize: string, letterSpacing: string) {
+  renderTicks(ticks: CartesianTickItem[] = [], fontSize: string, letterSpacing: string): React.ReactElement | null {
     const { tickLine, stroke, tick, tickFormatter, unit } = this.props;
     const finalTicks = getTicks({ ...this.props, ticks }, fontSize, letterSpacing);
     const textAnchor = this.getTickTextAnchor();
@@ -313,7 +313,7 @@ export class CartesianAxis extends Component<Props, IState> {
       );
     });
 
-    return <g className="recharts-cartesian-axis-ticks">{items}</g>;
+    return items.length > 0 ? <g className="recharts-cartesian-axis-ticks">{items}</g> : null;
   }
 
   render() {
@@ -330,7 +330,7 @@ export class CartesianAxis extends Component<Props, IState> {
       finalTicks = ticks && ticks.length > 0 ? ticksGenerator(this.props) : ticksGenerator(noTicksProps);
     }
 
-    if (width <= 0 || height <= 0 || !finalTicks || !finalTicks.length) {
+    if (width <= 0 || height <= 0) {
       return null;
     }
 

src/cartesian/YAxis.tsx

@@ -40,7 +40,6 @@ export const YAxis: FunctionComponent<Props> = ({ yAxisId }: Props) => {
   const width = useChartWidth();
   const height = useChartHeight();
   const axisOptions = useYAxisOrThrow(yAxisId);
-
   if (axisOptions == null) {
     return null;
   }

test/cartesian/XAxis.spec.tsx

@@ -177,6 +177,21 @@ describe('<XAxis />', () => {
     expect(bar).not.toBeInTheDocument();
   });
 
+  it('Should render the YAxis line without any ticks', () => {
+    const barData = [{ day: '05-01' }, { day: '05-02' }];
+    const { container } = render(
+      <BarChart width={300} height={300} data={barData}>
+        <Bar dataKey="y" isAnimationActive={false} />
+        <XAxis dataKey="y" type="number" />
+      </BarChart>,
+    );
+    const ticksGroup = container.getElementsByClassName('recharts-cartesian-axis-tick-line');
+    expect(ticksGroup).toHaveLength(0);
+
+    const axisLine = container.getElementsByClassName('recharts-cartesian-axis-line');
+    expect(axisLine).toHaveLength(1);
+  });
+
   it('Render Bars for a single data point with barSize=50%', () => {
     const { container } = render(
       <BarChart width={300} height={300} data={data.slice(0, 1)} barSize="50%">

test/cartesian/YAxis.spec.tsx

@@ -152,7 +152,7 @@ describe('<YAxis />', () => {
     expect(ticks[1].getAttribute('y')).toBe('102.5');
   });
 
-  it("Don't render empty tick", () => {
+  it('Should skip rendering ticks with empty text', () => {
     const areaData = [
       { day: '05-01', weather: 'sunny' },
       { day: '05-02' },
@@ -170,6 +170,21 @@ describe('<YAxis />', () => {
     expect(ticks).toHaveLength(3);
   });
 
+  it('Should render the YAxis line without any ticks', () => {
+    const areaData = [{ day: '05-01' }, { day: '05-02' }];
+    const { container } = render(
+      <AreaChart width={400} height={400} data={areaData}>
+        <YAxis type="category" />
+        <Area type="stepAfter" dataKey="weather" stroke="#0088FE" />
+      </AreaChart>,
+    );
+    const ticksGroup = container.getElementsByClassName('recharts-cartesian-axis-tick-line');
+    expect(ticksGroup).toHaveLength(0);
+
+    const axisLine = container.getElementsByClassName('recharts-cartesian-axis-line');
+    expect(axisLine).toHaveLength(1);
+  });
+
   it('should throw when attempting to render outside of Chart', () => {
     expect(() => render(<YAxis dataKey="x" name="stature" unit="cm" />)).toThrow(
       'Invariant failed: Could not find Recharts context; are you sure this is rendered inside a Recharts wrapper component?',