title: Custom Tooltip for Recharts StackedBarChart
body: <p>In my application, I would like to have a StackBarChart component that clearly breaks down the data: <a href="https://recharts.org/en-US/examples/StackedBarChart" rel="nofollow noreferrer">https://recharts.org/en-US/examples/StackedBarChart</a> <strong>and</strong> with any additional information in the tooltip as seen here: <a href="https://recharts.org/en-US/examples/CustomContentOfTooltip" rel="nofollow noreferrer">https://recharts.org/en-US/examples/CustomContentOfTooltip</a>.</p>
  <p>How can I add custom info in the tooltip and show the proper breakdown of data?</p>
  <p>When I tried to incorporate code from <a href="https://stackoverflow.com/questions/65913461/typescript-interface-for-recharts-custom-tooltip">Typescript Interface for Recharts Custom Tooltip</a>, the only information that would show up in the tooltip would be the <code>Text</code>, not the breakdown of the data (aka <code>A</code> and <code>B</code> which are calls to an API). See code below:</p>
  <pre><code>  const CustomTooltip = ({ active }: TooltipProps&lt;ValueType, NameType&gt;) =&gt; {
      if( active ){
        return (
          &lt;div className = &quot;custom-tooltip&quot;&gt;
            &lt;p className=&quot;Text&quot;&gt; Text: &lt;/p&gt;
          &lt;/div&gt;
        );
      }
      return null;
    }
  
  //more code
   return (
      &lt;&gt;
          &lt;Tooltip content = {&lt;CustomTooltip /&gt;} labelStyle={{ color: &quot;black&quot; }} /&gt;
          &lt;Bar dataKey=&quot;other&quot; /&gt;
          &lt;Bar dataKey=&quot;A&quot; /&gt;
          &lt;Bar dataKey=&quot;B&quot; /&gt;
  
  );
  
            
  </code></pre>
  <p>See behavior in code sandbox: <a href="https://codesandbox.io/s/stacked-bar-chart-s47i2?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/stacked-bar-chart-s47i2?file=/src/App.tsx</a></p>