title: Flutter: how to makeline chart inside a sized box?
body: <p>i'm trying to make a percent indicator and a line chart inside a sized box like this</p>
  <p><img src="https://i.stack.imgur.com/AQ4MX.jpg" alt="" /></p>
  <p>but when i add the line chart not compact to the sized box,
  it shows error in the sized box with an error with the widht, i'm fairly new to flutter this is my first time using a chart.</p>
  <p>Code :</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:percent_indicator/circular_percent_indicator.dart';
  import 'package:syncfusion_flutter_charts/charts.dart';
  import 'package:fl_chart/fl_chart.dart';
  
  class Data5 extends StatelessWidget {
    const Data5({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: 100,
          height: 270,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [Linechart()],
          ),
        ),
      );
    }
  }
  
  class Circular extends StatelessWidget {
    const Circular({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: EdgeInsets.all(8.0),
        child: CircularPercentIndicator(
          radius: 100,
          lineWidth: 15.0,
          percent: 1.00,
          center: Text(
            &quot;TF&quot;,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
          ),
          progressColor: Color.fromRGBO(37, 150, 190, 1),
        ),
      );
    }
  }
  
  class Linechart extends StatelessWidget {
    const Linechart({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      final List&lt;SalesData&gt; chartData = [
        SalesData(&quot;Jan&quot;, 0),
        SalesData(&quot;Feb&quot;, 0),
        SalesData(&quot;Mar&quot;, 0),
        SalesData(&quot;Apr&quot;, 0),
        SalesData(&quot;May&quot;, 3),
        SalesData(&quot;June&quot;, 10),
        SalesData(&quot;Jul&quot;, 85),
        SalesData(&quot;Aug&quot;, 25),
        SalesData(&quot;Sept&quot;, 5),
        SalesData(&quot;Oct&quot;, 2),
        SalesData(&quot;Nov&quot;, 0),
        SalesData(&quot;Dec&quot;, 0)
      ];
  
      return Padding(
          padding: EdgeInsets.all(8.0),
          child: Center(
              child: Container(
                  child: SfCartesianChart(
                      primaryXAxis: DateTimeAxis(),
                      series: &lt;ChartSeries&gt;[
                // Renders line chart
                LineSeries&lt;SalesData, String&gt;(
                    dataSource: chartData,
                    xValueMapper: (SalesData sales, _) =&gt; sales.Month,
                    yValueMapper: (SalesData sales, _) =&gt; sales.sales)
              ]))));
    }
  }
  
  class SalesData {
    SalesData(this.Month, this.sales);
    final String Month;
    final int sales;
  }
  </code></pre>