Facilitate styling the top line of area charts

[franky47]

I was looking at recreating this design with react-charts:

It contains two visual components:

• A line with no points, with a blue stroke of 2px
• A gradient area under the curve

After a discussion with @tannerlinsley on Twitter, who pointed out that Area graphs are made of two components (a line and a filled path, perfect !), I looked into styling them separately using getSeriesStyle.

Looking at the Area component code, both the line and the area path use the same styling inputs, with the exception of the line having an extra fill: none property.

Unfortunately for this design, setting a stroke of 2px for the line would also set it for the area, which produces an undesired outline at the bottom and sides of the graph:

One way I solved this in my project was to use external CSS to disable the stroke on the area path:

g.Series > g > path:first-child {
  /* Rendered path uses inline styles, so !important must be used to override them: */
  stroke-width: 0 !important;
}

I would like to open a PR suggesting an additional area property in what is returned by getSeriesStyle, so that each path can be styled separately without relying on external CSS.

Example:

const getSeriesStyle = React.useCallback(
  () => ({
    area: {
      // See the "Custom Styles" example for gradients usage
      fill: `url(#graph-gradient)`
    },
    line: {
      strokeWidth: '2px',
      stroke: 'blue'
    }
  }),
  []
)

In order not to break existing designs, the area path could use properties from both line and area:

const areaPathProps = {
    d: areaPath,
    style: {
      ...defaultAreaStyle,
      ...style,
      ...style.line,
+     ...style.area
    }
  };

Comments and suggestions are welcome !

[tannerlinsley]

Yep a PR for this would be great!

[tannerlinsley]

🎉 This issue has been resolved in version 0.0.10 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[fralfarom]

Hello @franky47 and @tannerlinsley !! is this available? If so, how can I use it?