how to add text label on left side title with fl chart? flutter

Question

i am learning flutter. Is there any way to add left side title labels with custom value / different interval in fl chart? This is what i have now line chart with fl chart

i want it to be like this design 1 design 2

btw the first one lines y values are 17, 18.5, 25, 27. From what i know, to add labels we must use interval but it needs to have the same repeatation while my line does not. Pls help, thank you

my current code

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class IMTLineChart extends StatelessWidget {
  final List<double> imtValues;
  final List<Timestamp> dates;

  IMTLineChart(this.imtValues, this.dates);

  LineChartBarData garis(double value, Color warna) {
    return LineChartBarData(
      spots: [FlSpot(0, value), FlSpot(imtValues.length - 1, value)],
      isCurved: false,
      color: warna,
      barWidth: 2,
      dotData: FlDotData(show: false),

    );
  }

  @override
  Widget build(BuildContext context) {
  // Balikkan urutan data
  List<double> reversedIMTValues = imtValues.reversed.toList();
  List<Timestamp> reversedDates = dates.reversed.toList();

   // Buat objek DateFormat untuk mengubah format tanggal
  final dateFormat = DateFormat('dd-MM-yyyy');

   Size size = MediaQuery.of(context).size;

    return LineChart(
      LineChartData(
        lineBarsData: [
          
          LineChartBarData(
            spots: [
              for (int i = 0; i < reversedIMTValues.length; i++)
                FlSpot(i.toDouble(), double.parse(reversedIMTValues[i].toStringAsFixed(1))),
            ],
            isCurved: false,
            color: Colors.blue,
            barWidth: 5,
            dotData: FlDotData(show: false)
          ),
          // Sangat Kurus
          garis(17, Colors.red),
          // Kurus
          garis(18.5, Colors.green),
          // Normal
          garis(25, Colors.orange),
          // Gizi lebih
          garis(27, Colors.red)
          // Obesitas
        ],
        titlesData: FlTitlesData(
          // sb x bawah
          bottomTitles: AxisTitles( 
            sideTitles: SideTitles(
              showTitles: true,
              interval: 1, // Atur interval sesuai kebutuhan Anda
              reservedSize: 22,
              getTitlesWidget: (value, meta) {
                return  Text(dateFormat.format(reversedDates[value.toInt()].toDate()), 
                            style: TextStyle(fontSize: 12),
                        ); // Label dimulai dari 1
              },
            ),
          ),
          // sb x atas
          topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),

          // sb y kiri
          leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
          
          // sb y kanan
          rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
      ),

      gridData: FlGridData(
        show: false
      ),
      
      borderData: FlBorderData(show: true),

      lineTouchData: LineTouchData(
        enabled: false,
      ),

      ),
      
    );
  }
}

Answer 1

never mind, just add the needed FLspot and set the left titles.