Show another value on xaxis e.g. year and age

[dinesh gummadi]

Want to show years and age on the xaxis value How can this be done. I'm using flutter and developing using flutterflow nocode platform.

[Lokesh Palani]

Hi Dinesh,

You can achieve your requirement by setting the axes in the SfCartesianChart. By using this, you can display multiple axis in the Chart. We have prepared a workaround sample by using two LineSeries. One LineSeries is used to display default axis and the other LineSeries is mapped with axis name in the series to display another axis. We have shared code snippet, screenshot, user guide documentation link and sample for your reference. Please let us know if you need any further assistance.

Code Snippet:

axes: [

          NumericAxis(

            name: 'xAxis',

            interval: 5,

            minimum: 31,

            maximum: 61,

            labelStyle: TextStyle(

              color: Colors.blue.shade900,

            ),

            axisLine: const AxisLine(

              color: Colors.transparent,

            ),

            majorTickLines: const MajorTickLines(

              color: Colors.transparent,

            ),

            edgeLabelPlacement: EdgeLabelPlacement.hide,

          ),

        ],

        series: <CartesianSeries<ChartSampleData, DateTime>>[

          LineSeries<ChartSampleData, DateTime>(

            dataSource: data,

            color: Colors.blue,

            name: 'Total Loan',

            xValueMapper: (ChartSampleData sales, _) => sales.year,

            yValueMapper: (ChartSampleData sales, _) => sales.sales,

          ),

          LineSeries<ChartSampleData, DateTime>(

            dataSource: const [],

            xValueMapper: (ChartSampleData sales, _) => sales.year,

            yValueMapper: (ChartSampleData sales, _) => sales.sales,

            xAxisName: 'xAxis',

            isVisibleInLegend: false,

          ),

        ],

      ),

Screenshot:

Regards,

Lokesh P.

Attachment: chart_188277_75d47304.zip

[dinesh gummadi]

Thank you, These would be a fixed values if you give an interval. While I'm looking for each year, there is a age when user zoom in or zoom out the age must show dynamically.

 NumericAxis(

            name: 'xAxis',

            interval: 5,

            minimum: 31,

            maximum: 61,

            labelStyle: TextStyle(

              color: Colors.blue.shade900,

            ),

[Lokesh Palani]

Hi Dinesh,

We can’t achieve to display age dynamically when zooming with multiple axes in the SfCartesianChart as suggested in the previous update. So, we have now prepared the workaround sample by displaying the age dynamically on zooming and customized the axis label text by storing the age in the _axisLabelText variable using axisLabelFormatter in the DateTimeAxis. We have shared user guide documentation link, screen recording, sample, and code snippet for your reference. You can modify the sample based on your requirements. Please let us know if you need any further assistance.

Note: 

We have prepared a workaround sample to display the age dynamically based on the year when zooming.

UG Link,

https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter

Code Snippet:

 final List<ChartSampleData> data = [

    ChartSampleData(DateTime(2015, 1, 1, 1), 20),

    ChartSampleData(DateTime(2016, 1, 1, 1), 20),

    ChartSampleData(DateTime(2017, 1, 1, 1), 15),

    ChartSampleData(DateTime(2018, 1, 1, 1), 25),

    ChartSampleData(DateTime(2019, 1, 1, 1), 25),

    ChartSampleData(DateTime(2020, 1, 1, 1), 35),

    ChartSampleData(DateTime(2021, 1, 1, 1), 35),

    ChartSampleData(DateTime(2022, 1, 1, 1), 40),

    ChartSampleData(DateTime(2023, 1, 1, 1), 40),

    ChartSampleData(DateTime(2024, 1, 1, 1), 30),

    ChartSampleData(DateTime(2025, 1, 1, 1), 28),

    ChartSampleData(DateTime(2026, 1, 1, 1), 28),

    ChartSampleData(DateTime(2027, 1, 1, 1), 36),

    ChartSampleData(DateTime(2028, 1, 1, 1), 36),

    ChartSampleData(DateTime(2029, 1, 1, 1), 20),

    ChartSampleData(DateTime(2030, 1, 1, 1), 34),

    ChartSampleData(DateTime(2031, 1, 1, 1), 34),

    ChartSampleData(DateTime(2032, 1, 1, 1), 28),

    ChartSampleData(DateTime(2033, 1, 1, 1), 28),

    ChartSampleData(DateTime(2034, 1, 1, 1), 34),

    ChartSampleData(DateTime(2035, 1, 1, 1), 42),

    ChartSampleData(DateTime(2036, 1, 1, 1), 42),

    ChartSampleData(DateTime(2037, 1, 1, 1), 23),

    ChartSampleData(DateTime(2038, 1, 1, 1), 62),

    ChartSampleData(DateTime(2039, 1, 1, 1), 62),

    ChartSampleData(DateTime(2040, 1, 1, 1), 85),

    ChartSampleData(DateTime(2041, 1, 1, 1), 85),

    ChartSampleData(DateTime(2042, 1, 1, 1), 74),

    ChartSampleData(DateTime(2043, 1, 1, 1), 74),

    ChartSampleData(DateTime(2044, 1, 1, 1), 53),

    ChartSampleData(DateTime(2045, 1, 1, 1), 68),

  ];

 

  final Map<String, String> _axisLabelText = {

    '2015': '2015 31',

    '2016': '2016 32',

    '2017': '2017 33',

    '2018': '2017 34',

    '2019': '2019 35',

    '2020': '2020 36',

    '2021': '2021 37',

    '2022': '2022 38',

    '2023': '2023 39',

    '2024': '2024 40',

    '2025': '2025 41',

    '2026': '2026 42',

    '2027': '2027 43',

    '2028': '2028 44',

    '2029': '2029 45',

    '2030': '2030 46',

    '2031': '2031 47',

    '2032': '2032 48',

    '2033': '2033 49',

    '2034': '2034 50',

    '2035': '2035 51',

    '2036': '2036 52',

    '2037': '2037 53',

    '2038': '2038 54',

    '2039': '2039 55',

    '2040': '2040 56',

    '2041': '2041 57',

    '2042': '2042 58',

    '2043': '2043 59',

    '2044': '2044 60',

    '2045': '2045 61',

    '2046': '2046 62',

  };

 

 

 primaryXAxis: DateTimeAxis(

          isVisible: true,

          axisLabelFormatter: (axisLabelRenderArgs) {

            String text = _axisLabelText[axisLabelRenderArgs.text] ??

                axisLabelRenderArgs.text;

            return ChartAxisLabel(text, axisLabelRenderArgs.textStyle);

          },

        ),

Regards,

Lokesh P.

Attachment: chart_188277_(2)_73e108e8.zip