Set string on y-axis

[AFazakas-UAH]

Hi!, I am developing an app in which I want to show a line graph. In this graph I want to show in which room an individual has been in at any given moment. To do this we have a list called roomList with the following structure:

class RoomData {
  String room;
  DateTime timestamp;
  int CodHabitacionSensor;

  RoomData(this.room, this.timestamp, this.CodHabitacionSensor);
}

As shown this list contains three variables, room is a string that for example is bathroom whose CodHabitacionSensor corresponds to 3, what I have achieved so far is to show the graph with the integers, however I am not able to put on the Y axis the string bathroom, and I can only represent the integer CodHabitacionSensor . Next I show you the implemented code

child: SfCartesianChart(
  plotAreaBorderWidth: 0,
  primaryXAxis: DateTimeAxis(
      dateFormat: DateFormat('HH:mm d/M/y'),
      majorGridLines: const MajorGridLines(width: 0)),
  primaryYAxis: NumericAxis(
      axisLine: const AxisLine(width: 0),
      labelFormat: '{value} ',
      majorTickLines: const MajorTickLines(size: 0)),
  series: _getRoomLineSeries(),
  trackballBehavior: _trackballBehavior,
),

List<LineSeries<RoomData, DateTime>> _getRoomLineSeries() {
  return <LineSeries<RoomData, DateTime>>[
    LineSeries<RoomData, DateTime>(
        animationDuration: 2500,
        dataSource: roomList!,
        xValueMapper: (RoomData sales, _) => sales.timestamp,
        yValueMapper: (RoomData sales, _) => sales.CodHabitacionSensor,
        width: 2,
        markerSettings: const MarkerSettings(isVisible: true)),
  ];
}

[sfHariHaraSudhan]

Hi @AFazakas-UAH,

We would like to inform you that there is no direct option to render the String values in the y axis of the SfCartesianChart as it renders only the numeric scale values in the vertical axis, and it is the current behavior. Shared the User Guide documentation link below regarding the rendering of axis for your reference.

UG: https://help.syncfusion.com/flutter/cartesian-charts/axis-types.

However, you can achieve the mentioned requirement by customizing and modifying the axislabels according to your needs using the axisLabelFormatter callback in the primaryYAxis as shown in the below code snippet.

class _MyHomePageState extends State<MyHomePage> {
  late List<RoomData> roomList;
  late TrackballBehavior _trackballBehavior;
  int index = 0;
 
  @override
  void initState() {
    roomList = [
      RoomData('India', DateTime(2001), 05),
      RoomData('Japan', DateTime(2002), 06),
      RoomData('London', DateTime(2003), 01),
      RoomData('America', DateTime(2004), 03),
      RoomData('Dubai', DateTime(2005), 08),
      RoomData('Pakistan', DateTime(2006), 02),
      RoomData('Switzerland', DateTime(2007), 05),
      RoomData('New Zealand', DateTime(2008), 09),
      RoomData('Australia', DateTime(2009), 04),
      RoomData(' Canada', DateTime(2010), 03),
    ];
    _trackballBehavior = TrackballBehavior(enable: true);
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfCartesianChart(
        plotAreaBorderWidth: 0,
        primaryXAxis: DateTimeAxis(
          dateFormat: DateFormat('HH:mm d/M/y'),
          majorGridLines: const MajorGridLines(width: 0),
        ),
        primaryYAxis: NumericAxis(
          axisLine: const AxisLine(width: 0),
          labelFormat: '{value}',
          majorTickLines: const MajorTickLines(size: 0),
          axisLabelFormatter: (axisLabelRenderArgs) {
            if (index < roomList.length) {
              index++;
              return ChartAxisLabel(
                roomList[index - 1].room,
                axisLabelRenderArgs.textStyle,
              );
            } else {
              index = 0;
              return ChartAxisLabel('', axisLabelRenderArgs.textStyle);
            }
          },
        ),
        series: _getRoomLineSeries(),
        trackballBehavior: _trackballBehavior,
      ),
    );
  }
 
  List<LineSeries<RoomData, DateTime>> _getRoomLineSeries() {
    return <LineSeries<RoomData, DateTime>>[
      LineSeries<RoomData, DateTime>(
        animationDuration: 2500,
        dataSource: roomList,
        xValueMapper: (RoomData sales, _) => sales.timestamp,
        yValueMapper: (RoomData sales, _) => sales.codHabitacionSensor,
        width: 2,
        markerSettings: const MarkerSettings(isVisible: true),
      ),
    ];
  }
}
 
class RoomData {
  String room;
  DateTime timestamp;
  int codHabitacionSensor;
 
  RoomData(this.room, this.timestamp, this.codHabitacionSensor);
}

Snapshot:

Shared the User Guide documentation link below regarding the axisLabelFormatter callback for your reference.

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

Also attached the sample below for your reference and you can modify the sample according to your needs to achieve the mentioned requirement. If you have further queries, please get back to us.

Regards,
Hari Hara Sudhan. K.
_499857.zip

[AFazakas-UAH]

Thank you very much, with your advice I have solved the problem.