Rendering Arbitrary Shape in Charts

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

API docs mention arbitrary shapes such as Polygon, which leads me to believe that I should be able to include these shapes as part of a chart. For example, something like this:

const data = [
  {x: 100, y: 200}, {x: 120, y: 100}, {x: 170, y: 300},
  {x: 140, y: 250}, {x: 150, y: 400}, {x: 110, y: 280},
];
const polygon = [
  {x: 45, y:100}, {x: 45, y:200}, {x: 90, y:200}, {x: 90, y:100},
];
return (
  <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
    <XAxis type={'number'} dataKey={'x'} name='stature' unit='cm'/>
    <YAxis dataKey={'y'} name='weight' unit='kg'/>
    <CartesianGrid />
    <Scatter name='A school' data={data} fill='#8884d8'/>
    <Tooltip cursor={{strokeDasharray: '3 3'}}/>
    <Polygon data={polygon} fill='#8884d8'/>
  </ScatterChart>
);

However, it seems that there is only a list of children expected of any particular chart, and anything else is ignored. So, Polygon inside any chart is not rendered at all.

What is the expected behavior?

Shapes inside chart can be added and rendered as a layer within the same coordinate system. The above code should render something like this:

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

1.0.0-alpha.6

[jetzhou]

@xile611 I’m aware of that, but I will have to put in actual svg coordinates, rather than data points on the same scale as my normal data series. I’ve got a decent implementation using ReferenceArea working already, I can open a PR if you are interested. 😃

[shlangus]

For those who are looking for a way to draw own components and shapes inside of the chart. As mentioned above charts check the type of children and render only allowed types which include valid svg elements. If you pass <polygon> it should be rendered, but <Polygon> should not because it is a Rechart’s component used internally(?). So every direct child of chart should be either one of allowed types (see docs for it) or svg element.

If you try to put your own component that renders svg you would wonder that it is not rendered. That’s because the type of component is that you write in JSX. I found two options to get around this.

1. Use an allowed Rechart component’s name for custom components. This way your component also would implicitly get some props supposed to be passed to the original component. Also, there is some chart behavior depended on presens of particular components (e.g. Chart adds margin to place a Brush under the chart).
2. Wrap your component in a valid svg element. Don’t forget about <foreignObject> that is valid svg element allows to place non-svg stuff inside.