title: Recharts custom dot
body: <p>I have an <code>StackedAreaChart</code> and after I show areas on graph I want to add a custom dot.</p>
  
  <p>Currently my code look like this but I want to draw a dot depend on <code>XAxis</code> and <code>YAxis</code> data. Does exist any way to pass <code>x</code> and <code>y</code> coordinates to a <code>CustomizedDot</code> class?</p>
  
  <pre><code>import React from 'react';
  import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Label, Dot } from 'recharts';
  
  const data = [
      { name: 142, underweight: 36.3, normal: 11.3, overweight: 6.8, obese: 56.7 },
      { name: 196, underweight: 70.3, normal: 22.7, overweight: 15.9, obese: 2.2 },
  ];
  
  class CustomizedDot extends React.Component {
      render() {
          const { cx, cy } = this.props;
  
          return (
              &lt;circle cx={160} cy={50} r={25} stroke="black" strokeWidth={3} fill="red" /&gt;
          );
      }
  };
  
  class BMIGraph extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;h2&gt;Index telesne mase za odrasle&lt;/h2&gt;
                  &lt;AreaChart width={600} height={400} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}&gt;
                      &lt;XAxis dataKey="name"&gt;
                          &lt;Label value="Višina (cm)" offset={0} position="insideBottom" /&gt;
                      &lt;/XAxis&gt;
                      &lt;YAxis&gt;
                          &lt;Label value="Teža (kg)" angle={-90} position="insideLeft" textAnchor="middle" /&gt;
                      &lt;/YAxis&gt;
                      &lt;CartesianGrid strokeDasharray="3 3" /&gt;
                      {/* &lt;Tooltip /&gt; */}
                      &lt;CustomizedDot /&gt;
                      &lt;Area type='monotone' dataKey='underweight' stackId="1" stroke='#8884d8' fill='#7d7dff' animationDuration={3500} name="Podhranjenost" dot={&lt;CustomizedDot /&gt;} /&gt;
                      &lt;Area type='monotone' dataKey='normal' stackId="1" stroke='#82ca9d' fill='#7dff7d' animationDuration={3500} name="Normalna teža" /&gt;
                      &lt;Area type='monotone' dataKey='overweight' stackId="1" stroke='#ffc658' fill='#ffff7d' animationDuration={3500} name="Prekomerna teža" /&gt;
                      &lt;Area type='monotone' dataKey='obese' stackId="1" stroke='#ffc658' fill='#ff7d7d' animationDuration={3500} name="Debelost" /&gt;
                  &lt;/AreaChart&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default BMIGraph;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xKiJZ.png" rel="noreferrer">The result of the current code</a></p>