title: Unable to resize ApexChart component to take over its parent's width using React/Tailwind CSS
body: <p>I am working on a react project with Apex chart and I need to make the chart component responsive. How can I make an ApexChart component take over the width of its parent? Here is my code:</p>
  <pre><code>GuageRiskAnalysis.js (ApexChart component)
      import React from &quot;react&quot;;
      import Chart from &quot;react-apexcharts&quot;;
  
  const GuageRiskAnalysis = ({ myValue }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Chart
          type=&quot;radialBar&quot;
          series={[100 - (100 * myValue) / 5]}
          options={{
            sparkline: {
              enabled: true,
            },
            plotOptions: {
              radialBar: {
                startAngle: -90,
                endAngle: 90,
                track: {
                  background: &quot;#ce9f2c&quot;,
                  strokeWidth: &quot;97%&quot;,
                  margin: 5, // margin is in pixels
                  dropShadow: {
                    enabled: true,
                    top: 0,
                    left: 0,
                    blur: 1,
                    opacity: 0.5,
                  },
                },
                dataLabels: {
                  name: {
                    show: false,
                  },
                  value: {
                    offsetY: -5,
                    fontSize: &quot;25px&quot;,
                  },
                },
              },
            },
            grid: {
              padding: {
                top: -10,
              },
            },
  
            labels: [&quot;Percent&quot;],
            colors: [&quot;#04365d&quot;],
          }}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default GuageRiskAnalysis;
  </code></pre>
  <p><strong>App.js</strong> (minimal code)</p>
  <pre><code>&lt;div className=&quot;rounded  relative flex justify-center items-center   overflow-hidden shadow-sm&quot;&gt;
            &lt;div className=&quot;  flex flex-col  bg-green-500&quot;&gt;
              &lt;span className=&quot;flex justify-center items-center space-x-1 text-sm  px-3 py-1 font-semibold max-w-lg mr-2 mb-2&quot;&gt;
                &lt;span&gt;Business Interruption&lt;/span&gt;
              &lt;/span&gt;
              &lt;div className=&quot; text-sm  bg-yellow-500 pb-2&quot;&gt;
                &lt;GuageRiskAnalysis
                  className=&quot;h-96 bg-red&quot;
                  myValue={financialValue}
                /&gt;
                &lt;div className=&quot;&quot;&gt;
                  &lt;input
                    min=&quot;0&quot;
                    max=&quot;5&quot;
                    type=&quot;number&quot;
                    value={financialValue}
                    name=&quot;firstName&quot;
                    onChange={(e) =&gt; setFinancialValue(e.target.value)}
                    className=&quot;text-black mx-20   p-3 w-36 h-10 text-center border-2 outline-none&quot;
                  /&gt;
                &lt;/div&gt;{&quot; &quot;}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>The above code gives the following output.</p>
  <p><a href="https://i.stack.imgur.com/EC4RS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EC4RS.png" alt="enter image description here" /></a></p>
  <p>I want the <code>GuageRiskAnalysis</code> chart to take over the width of its parent div, using Tailwind CSS for styling.</p>
  <p>What can I do to achieve this?</p>
  <p>Thanks</p>