Recharts: LineChart does not render point when there is only a single data point

[adrianmcli]

I am working on a LineChart, and I noticed that there is a bug where the point is not being rendered when there is only one data point. JS Fiddle Example Here

Input

Normally, I have this data:

data: [
    { varX: 'Mon', varY: 10 },
    { varX: 'Tue', varY: 24 },
    { varX: 'Wed', varY: 34 },
    { varX: 'Thu', varY: 40 },
    { varX: 'Fri', varY: 52 },
    { varX: 'Sat', varY: 62 },
    { varX: 'Sun', varY: 70 },
  ],

But with a single point, I will have this data:

data: [
    { varX: 'Mon', varY: 10 },
    { varX: 'Tue' },
    { varX: 'Wed' },
    { varX: 'Thu' },
    { varX: 'Fri' },
    { varX: 'Sat' },
    { varX: 'Sun' },
  ],

Potential Cause

After some testing, I believe it is because of this line in src/cartesian/Line.js:

if (isAnimationActive && !this.state.isAnimationFinished) {
  return null;
}

This line is inside the renderDots() function, and it seems that this.state.isAnimationFinished is causing the function to exit early.

Temporary Workaround

Since I do not need animation for a single data point, I have put in these two lines to make the point appear:

const numData = data.filter(item => item.varY).length;

and inside my <Line> component:

isAnimationActive={numData !== 1}

Essentially, I disable animation so the if statement returns false and it does not go into that code block.

Live Example of Bug

I've made a JSFiddle to demonstrate the bug and workaround: http://jsfiddle.net/248r5yha/1/

[xile611]

@adrianmc When a Line has a single point, the length of this Line is 0. Then no animation will be triggered, so the state isAnimationFinished is always false.
It's a bug of Line, I'll fix it.

[xile611]

Fixed in version 0.12.6.

[nicholasgonzalezsc]

@xile611 I'm running into this bug with <Area /> in v1.1.0