Server Side Rendering - path not visible due to stroke-dasharray

[recharts]

Server Side Rendering - path not visible due to stroke-dasharray

[xile611]

stroke-dasharray: 0px 1px; means that you want to draw the line with 0px dash and 1px gap repeatedly.
Then of course, the path is invisible. You can view the following example, and you will find that normal behavior of the browser always been this way.
https://jsfiddle.net/dv8b287f/

You can also view the following documents about stroke-dasharray further:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
https://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty

[isilweo]

I understand that stroke-dasharray: 0px 1px;. But don't you think that rendering behavior should be same on server side and client side? I've got exactly same code and different results. From the other side I think that default behavior of component should be that it is visible rather than hidden.

[xile611]

Sorry for misunderstanding what you mean.
And of course, rendering behavior should be same on server side and client side.
Some bug happens in server side rendering when stroke-dasharray is set in Line.

[xile611]

Fixed in v0.8.0

[isilweo]

It still doesn't work for me, or I don't understand something. I have updated to 0.8
After server side rendering i still don't see Path because in Path i Have stroke-dasharray="none" style="stroke-dasharray:0px 1px;"
I understand that behavior of SSR and CSR is same when rendering, but after componentDidMount you change style to style="stroke-dasharray: 1180.76px, 0px; transition: stroke-dasharray 1500ms ease;" to have nice animation and it becomes visible.

I will repeat my opinion: default props of chart should be that path is visible. I can make it visible by setting up strokeDasharray to "1180 0" or what is also intereseting isAnimationActive to false.

btw. i couldn't find how to disable animation in documentation.

thnx for fixing other bugs

[xile611]

@isilweo Can you show you code here? I do not quite understand what is your problem now.

And I will add the apis about animation in the document.

[isilweo]

sure. https://github.com/isilweo/recharts-ssr-test/ here is very simple repo with standard ssr rendering and on the end client side js is loaded.

Exact code is in shared/chart.js in my repo

import {LineChart, Line, Legend} from 'recharts';
import React from 'react';

export default class Chart extends React.Component {
    render() {
        const data = [
            {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
            {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
            {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
            {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
            {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
            {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
            {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
        ];

        return (
            <LineChart width={600} height={300} data={data}>
                <Legend />
                <Line type="monotone" dataKey="pv" stroke="#8884d8" />
                <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
            </LineChart>
        );
    }
}

Look also on this screenshots, maybe it will be more obvious:

1. Client side rendering, everything is visible
   
2. Disable javascript
   
3. REfresh and see server side rendering - lines are invisible
   

[xile611]

@isilweo
I have found the reason. The paths have attributes stroke-dasharray="none", style="stroke-dasharray: 0px 1px;" because we need to hide the path before animation of paths start, otherwise paths will blink in client side.

And It seems impossible that the behavior of SSR and CSR is exactly the same when paths have animation.
Maybe you can set isAnimationActive={false} in Line when you need SSR.

<LineChart width={600} height={300} data={data}>
  <Legend />
  <Line type="monotone" dataKey="pv" stroke="#8884d8" isAnimationActive={false} />
  <Line type="monotone" dataKey="uv" stroke="#82ca9d" isAnimationActive={false}/>
</LineChart>