Scatter Plot X-Axis label congestion

[honey bansal]

I am attaching the code and issue image. Kindly check out this and tell me what could be the issue for the congestion of x-axis labels.

import 'package:cosmi/models/skin_report_model.dart';

import 'package:cosmi/modules/skinAnalysis/skin_analysis_controller.dart';

import 'package:cosmi/utils.dart';

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';

import 'package:syncfusion_flutter_charts/charts.dart';

import 'package:get/get.dart';

class ScatterGraph extends StatefulWidget {

  final bool? isMoreData;

  const ScatterGraph({super.key, this.isMoreData = false});

  @override

  _ScatterGraphState createState() => _ScatterGraphState();

}

class _ScatterGraphState extends State<ScatterGraph> {

  late List<MetricData> _chartData;

  int? _selectedIndex;

  @override

  void initState() {

    super.initState();

    _selectedIndex = -1;

  }

  @override

  Widget build(BuildContext context) {

    return GetBuilder<SkinAnalysisController>(builder: (controller) {

      _chartData = getChartData();

      return SfCartesianChart(

          primaryXAxis: CategoryAxis(

            arrangeByIndex: true,

            majorGridLines: const MajorGridLines(width: 0),

            labelStyle: GoogleFonts.nunito(

                textStyle:

                    const TextStyle(color: Color.fromARGB(255, 138, 138, 138))),

          ),

          primaryYAxis: NumericAxis(

            minimum: 0,

            maximum: 100,

            interval: 20,

            labelFormat: '{value}',

            axisLine: const AxisLine(width: 1, color: Colors.white),

            borderColor: Colors.white,

            // majorTickLines: MajorTickLines(size: 10),

            majorGridLines: const MajorGridLines(width: 1),

            labelStyle: GoogleFonts.nunito(

                textStyle:

                    const TextStyle(color: Color.fromARGB(255, 138, 138, 138))),

          ),

          series: <CartesianSeries>[

            LineSeries<MetricData, String>(

                color: const Color.fromARGB(255, 187, 127, 255),

                animationDuration: 1000,

                dataSource: _chartData,

                xValueMapper: (MetricData data, _) => data.day,

                yValueMapper: (MetricData data, _) => data.percentage,

                dataLabelSettings: DataLabelSettings(

                    useSeriesColor: false,

                    showCumulativeValues: false,

                    isVisible: true,

                    builder: (dynamic data, dynamic point, dynamic series,

                        int pointIndex, int seriesIndex) {

                      return pointIndex == _selectedIndex

                          ? Column(

                              children: [

                                Text('${data.percentage}'),

                              ],

                            )

                          : Container();

                    }),

                selectionBehavior: SelectionBehavior(

                  enable: true,

                ),

                markerSettings: const MarkerSettings(

                    isVisible: true,

                    height: 10,

                    width: 10,

                    color: Color.fromARGB(255, 213, 168, 255),

                    shape: DataMarkerType.circle)),

          ]);

    });

  }

  List<MetricData> getChartData() {

    final List<MetricData> chartData = [];

    SkinAnalysisController controller = Get.find<SkinAnalysisController>();

    List<AnalysisResult> data = controller.skinCareReports;

    final String? metricType = controller.selectedMetric;

    void addChartData(int? Function(AnalysisResult) getScore) {

      for (var i = 0; i < data.length; i++) {

        if (widget.isMoreData! || i < 5) {

          final score = getScore(data[i]);

          if (score != null) {

            chartData.add(

              MetricData(extractDateMonth(data[i].timeStamp!), score),

            );

          }

        } else {

          break;

        }

      }

    }

    final metricMapping = {

      "Acne": (AnalysisResult result) => result.analysisResult?.acne?.score,

      "Pores": (AnalysisResult result) => result.analysisResult?.pores?.score,

      "Skin Tone": (AnalysisResult result) =>

          result.analysisResult?.skinTone?.score,

      "Hydration": (AnalysisResult result) =>

          result.analysisResult?.hydration?.score,

      "Texture": (AnalysisResult result) =>

          result.analysisResult?.texture?.score,

      "Redness": (AnalysisResult result) =>

          result.analysisResult?.redness?.score,

      "Dark Circles": (AnalysisResult result) =>

          result.analysisResult?.darkCircles?.score,

      "Oiliness": (AnalysisResult result) =>

          result.analysisResult?.oiliness?.score,

    };

    if (metricType != null && metricMapping.containsKey(metricType)) {

      addChartData(metricMapping[metricType]!);

    }

    return chartData;

  }

}

class MetricData {

  MetricData(this.day, this.percentage);

  final String day;

  final int percentage;

}

[Thilip Chandru Soundraraj]

Hi honey bansal,

We tried to replicate the reported issue at our end. Unfortunately, we are not able to reproduce the reported issue as we are not exactly sure on what scenario the issue is replicating. So, we kindly request you to try to replicate the reported issue in the below attached test sample along with the screenshot and the steps to reproduce the issue, so that it will help us assist you in a better way.

Regards,

S Thilip Chandru.

Attachment: fm_194106_6f756c95.zip

[honey bansal]

I used interval property of CategoryAxis in x-axis and it solved the congestion issue of x-labels

[Thilip Chandru Soundraraj]

Hi honey bansal,

We are happy to hear that the solution was found by yourself. If you have any further queries, please get back to us. We are always happy to assist you.

Regards,

S Thilip Chandru.