How not to plot line from 0 in syncfusion flutter chart?

Question

I'm plotting the syncfusion line chart I have values above 90 on some cases I'm getting zero values the line is being plotted from the base line i do not want to plot the line if the value is zero.

Example:

I want to remove the line I have circled in the image.

The code is below

main.dart

import 'package:chartexmpl/widget/syncfusuion_line_chart.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 MaterialApp(
      title: 'Flutter Chart',
      theme: ThemeData(
        primarySwatch: Colors.blue,
  ),
  home: const MyHomePage(title: 'Chart Demo'),
);
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double radius = 12.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Container(
      padding: EdgeInsets.all(20),
      color: Colors.blue[100],
      child: Column(children: [
        Card(
          child: SYncfusion(),
        ),
      ]),
    ),
      ),
    );
  }
}

syncfusion_line_chart.dart

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class SYncfusion extends StatefulWidget {
  const SYncfusion({Key? key}) : super(key: key);

  @override
  State<SYncfusion> createState() => _SYncfusionState();
}

class _SYncfusionState extends State<SYncfusion> {
  late List<SalesData> _chartData;
  late TooltipBehavior _tooltipBehavior;
  @override
  void initState() {
    _chartData = getChartData();
    _tooltipBehavior = TooltipBehavior(enable: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      legend: Legend(
      isVisible: true, isResponsive: true, position: LegendPosition.bottom),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries>[
    LineSeries<SalesData, String>(
        name: 'User 1',
        dataSource: _chartData,
        xValueMapper: (SalesData sales, _) => sales.year,
        yValueMapper: (SalesData sales, _) => sales.sales,
        markerSettings: MarkerSettings(isVisible: true),
        enableTooltip: true),
  ],
  primaryXAxis: CategoryAxis(
    labelRotation: -60,
  ),
  primaryYAxis: NumericAxis(
    maximum: 100,
    minimum: 90,
    desiredIntervals: 10,
    labelFormat: '{value}',
  ),
);
  }
}

List<SalesData> getChartData() {
  final List<SalesData> chartData = [
SalesData("2013", 100),
SalesData("2014", 95),
SalesData("2015", 98),
SalesData("2016", 94),
SalesData("2017", 94),
SalesData("2018", 0),
SalesData("2019", 94),
SalesData("2020", 96),
SalesData("2021", 98),
SalesData("2022", 96),
SalesData("2023", 99)
];
  return chartData;
}

class SalesData {
  SalesData(this.year, this.sales);
  final String year;
  final double sales;
}

Answer 1

We suggest having the null value instead of 0 in the data source or assigning the null value while binding the data source to yValueMapper properly like in the below code snippet, this will help you to achieve your requirement.

Code snippet:

yValueMapper: (SalesData sales, _) =>
    sales.sales == 0 ? null : sales.sales,

Screenshot