Fl Chart Flutter

Question

I'm using fl chart and I want to make a chart where LeftTitle and RightTitle will be independent of each other. Now I set maxY and minY and it immediately works on the right and left sides. Is it possible to make them independent of each other?

I try to change minY and maxY but it didn't help me

Answer 1

This code may be helpful, please check here:-

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Independent Axes Chart'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: IndependentAxesChart(),
          ),
        ),
      ),
    );
  }
}

class IndependentAxesChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Create data for both left and right axes
    List<FlSpot> leftData = [
      const FlSpot(0, 5),
      const FlSpot(1, 10),
      const FlSpot(2, 15),
      const FlSpot(3, 20),
    ];

    List<FlSpot> rightData = [
      const FlSpot(0, 100),
      const FlSpot(1, 200),
      const FlSpot(2, 300),
      const FlSpot(3, 400),
    ];

    return LineChart(
      LineChartData(
        gridData: const FlGridData(show: false),
        titlesData: const FlTitlesData(
          leftTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 28,
            ),
          ),
          rightTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 28,
            ),
          ),
        ),

        borderData: FlBorderData(
          show: true,
          border: Border.all(color: const Color(0xff37434d), width: 1),
        ),
        minX: 0,
        maxX: 3,
        minY: 0, // Set your left axis minimum here
        maxY: 25, // Set your left axis maximum here

        lineBarsData: [
          LineChartBarData(
            spots: leftData,
            isCurved: true,
            color: Colors.blue,
            dotData: const FlDotData(show: false),
            belowBarData: BarAreaData(show: false),
          ),
          LineChartBarData(
            spots: rightData,
            isCurved: true,
            color: Colors.red,
            dotData: const FlDotData(show: false),
            belowBarData: BarAreaData(show: false),
          ),
        ],
      ),
    );
  }
}

I hope this will help you.