diff --git a/src/cartesian/CartesianAxis.tsx b/src/cartesian/CartesianAxis.tsx index 57a191d987..4d0e098533 100644 --- a/src/cartesian/CartesianAxis.tsx +++ b/src/cartesian/CartesianAxis.tsx @@ -260,9 +260,9 @@ export class CartesianAxis extends Component { * @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 { ); }); - return {items}; + return items.length > 0 ? {items} : null; } render() { @@ -330,7 +330,7 @@ export class CartesianAxis extends Component { 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; } diff --git a/src/cartesian/YAxis.tsx b/src/cartesian/YAxis.tsx index c1255327a3..ba5a850349 100644 --- a/src/cartesian/YAxis.tsx +++ b/src/cartesian/YAxis.tsx @@ -40,7 +40,6 @@ export const YAxis: FunctionComponent = ({ yAxisId }: Props) => { const width = useChartWidth(); const height = useChartHeight(); const axisOptions = useYAxisOrThrow(yAxisId); - if (axisOptions == null) { return null; } diff --git a/test/cartesian/XAxis.spec.tsx b/test/cartesian/XAxis.spec.tsx index 9953322cea..d4fa2cf0cc 100644 --- a/test/cartesian/XAxis.spec.tsx +++ b/test/cartesian/XAxis.spec.tsx @@ -177,6 +177,21 @@ describe('', () => { expect(bar).not.toBeInTheDocument(); }); + it('Should render the YAxis line without any ticks', () => { + const barData = [{ day: '05-01' }, { day: '05-02' }]; + const { container } = render( + + + + , + ); + 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( diff --git a/test/cartesian/YAxis.spec.tsx b/test/cartesian/YAxis.spec.tsx index b89bb90d07..2380137edc 100644 --- a/test/cartesian/YAxis.spec.tsx +++ b/test/cartesian/YAxis.spec.tsx @@ -152,7 +152,7 @@ describe('', () => { 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('', () => { expect(ticks).toHaveLength(3); }); + it('Should render the YAxis line without any ticks', () => { + const areaData = [{ day: '05-01' }, { day: '05-02' }]; + const { container } = render( + + + + , + ); + 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()).toThrow( 'Invariant failed: Could not find Recharts context; are you sure this is rendered inside a Recharts wrapper component?',