Step line chart

main.dart

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 28.0),
          child: AspectRatio(
            aspectRatio: 2,
            child: LineChart(
              LineChartData(
                  lineBarsData: [
                    LineChartBarData(
                      spots: [
                        const FlSpot(0, 3),
                        const FlSpot(1, 2),
                        const FlSpot(2, 1),
                        const FlSpot(3, 0),
                        const FlSpot(4, 1),
                        const FlSpot(5, 2),
                        const FlSpot(6, 1),
                        const FlSpot(7, 0),
                        const FlSpot(8, 0),
                        const FlSpot(9, 1),
                        const FlSpot(10, 1),
                      ],
                      isStepLineChart: true,
                      lineChartStepData: LineChartStepData(
                        stepDirection: LineChartStepData.stepDirectionForward,
                      ),
                      dotData: FlDotData(show: false),
                      colors: [
                        const Color(0xffe74076),
                        const Color(0xff0ac8f0),
                        const Color(0xff0f4aad),
                      ],
                      gradientFrom: const Offset(0.5, 0),
                      gradientTo: const Offset(0.5, 1),
                      barWidth: 4,
                    ),
                  ],
                  gridData: FlGridData(
                    show: true,
                    drawVerticalLine: false,
                    drawHorizontalLine: true,
                    getDrawingHorizontalLine: (value) {
                      return FlLine(color: const Color(0xffe7e7e7));
                    },
                  ),
                  borderData: FlBorderData(
                    show: true,
                    border: const Border(
                      bottom: BorderSide(color: Color(0xffe7e7e7), width: 2),
                      top: BorderSide(color: Color(0xffe7e7e7), width: 2),
                    ),
                  ),
                  titlesData: FlTitlesData(
                    show: true,
                    topTitles: SideTitles(showTitles: false),
                    rightTitles: SideTitles(showTitles: false),
                    leftTitles: SideTitles(showTitles: false),
                  )),
            ),
          ),
        ),
      ),
    );
  }
}