title: ReCharts: Donut Chart w/two labels in center
body: <p>I have a donut chart in which i need to add two stacked labels in center which I have done. What i can't figure out is how to add a little vertical space between.  ReCharts renders both these lines as SVG The chart is in a responsive container so no hard coded values. I know how to get a single label in center but can't figure out how to get two separate ones there without writing a render method for the entire chart. Suggestions?</p>
  
  <pre><code>&lt;ResponsiveContainer&gt;
              &lt;PieChart &gt;
                &lt;Tooltip/&gt;
                &lt;Legend
                  verticalAlign="bottom"
                  align="left"
                  iconType="circle"
                  payload={ getCustomLegendValues(tasks) } /&gt;
                &lt;Pie
                  data={tasks}
                  nameKey="name"
                  dataKey="value"
                  innerRadius="60%"
                  outerRadius="80%"
                  startAngle={90}
                  endAngle={-270}
                  fill="#8884d8"&gt;
                  {
                    tasks.map((entry, index) =&gt; &lt;Cell fill={ entry.color }/&gt;)
                  }
                  &lt;Label width={30} position="center"&gt;
                    { `${totalTasks} ${tasksNameLabel}` }
                  &lt;/Label&gt;
                &lt;/Pie&gt;
              &lt;/PieChart&gt;
            &lt;/ResponsiveContainer&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QZsdV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QZsdV.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/70FHF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/70FHF.png" alt="enter image description here"></a></p>