Search code examples
fluttersyncfusion

syncfusion charts package on flutter


I am using this package syncfusion_flutter_charts: ^18.4.47 to provide chart this is my code and there is a square beside my chart as showing in the pic enter image description here I am using this package syncfusion_flutter_charts: ^18.4.47 to provide chart this is my code and there is a square beside my chart as showing in the picenter image description here

  body: SizedBox(
    height: 200,
    width: 300,
    child: SfCartesianChart(
        primaryXAxis: CategoryAxis(
          maximumLabelWidth: 80,
        ),
        enableAxisAnimation: true,
        // borderColor: yellow,
        plotAreaBorderColor: yellow,
        plotAreaBackgroundColor: yellow,
        series: <ChartSeries<GeluValue, String>>[
          BarSeries(
            dataSource: <GeluValue>[
              GeluValue("السبت", 180),
              GeluValue("الاحد", 200),
              GeluValue("الاثنين", 160),
              GeluValue("الثلاثاء", 70),
              GeluValue("الاربعاء", 90),
              GeluValue("الخميس", 100),
              GeluValue("الجمعة", 70),
            ],
            xAxisName: "days",
            yAxisName: "values",
            // color: yellow,
            animationDuration: 20,
            xValueMapper: (GeluValue gelu, _) => gelu.day,
            yValueMapper: (GeluValue gelu, _) => gelu.gelu,
          )
        ]),
  ), 

Solution

  • We would like to tell you that, since the chart is a widget formed by drawing, RTL is not applicable for it. Your reported issue may arise due to using of delegates in your app like GlobalWidgetsLocalizations.delegate. Since for Arabic and some other locales, the default behavior is by RTL (right-to-left), we get the position from the right end and the chart starts to render from there. To resolve this issue, you can use the following code snippet,

    Directionality( 
     textDirection: TextDirection.ltr,  
     child: SfCartesianChart() 
    ) 
    

    By wrapping up our chart widget using the Directionality widget and set the textDirection to TextDirection.ltr will allow rendering the chart from the left end and hopes this will resolve your issue. Also, if you need the mirror image of the chart, you can achieve it by using the opposedPosition and isInversed properties in the respective axis. Here we also attached the modified given sample and screenshot for your reference, please make use of it. Now the rendered chart looks like renders from RTL (right-to-left). To know more about our charts, please refer to the following help document.
    https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#placing-axes-at-the-opposite-side

    Sample: https://www.syncfusion.com/downloads/support/directtrac/320174/ze/I320174-arabic-chart499151652

    Screenshots

    Arabic chart

    Mirror image

    Arabic_opposed