title: Recharts component to PNG
body: <p>I currently have a Recharts component that I would like to export as a PNG file.</p>
  <pre><code>&lt;LineChart
    id=&quot;currentChart&quot;
    ref={(chart) =&gt; (this.currentChart = chart)}
    width={this.state.width}
    height={this.state.height}
    data={this.testData}
    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
  &gt;
    &lt;XAxis dataKey=&quot;name&quot; /&gt;
    &lt;YAxis /&gt;
    &lt;CartesianGrid strokeDasharray=&quot;3 3&quot; /&gt;
    &lt;Tooltip /&gt;
    &lt;Legend /&gt;
    &lt;Line type=&quot;monotone&quot; dataKey=&quot;pv&quot; stroke=&quot;#8884d8&quot; activeDot={{ r: 8 }} /&gt;
    &lt;Line type=&quot;monotone&quot; dataKey=&quot;uv&quot; stroke=&quot;#82ca9d&quot; /&gt;
  &lt;/LineChart&gt;;
  
  </code></pre>
  <p>but I'm unsure if this is directly supported by the library.</p>
  <p>I have an idea that involves using a canvas and a 2D rendering context to get me close to a solution, as outlined on <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawWindow()" rel="nofollow noreferrer">MDN</a></p>
  <p>However, I'm not sure of a generic way to render an HTML element (or React Component) as a canvas to implement this solution.</p>
  <p>I might be going about this all wrong, and I would appreciate the correction!</p>