How to customize the appearance when the value is 0

[lcm1475]

Use case

If the value is 0 in the chart now, nothing will be displayed. I hope to customize the display when the value is 0
Current performance：

My expected performance：

Proposal

1

[lcm1475]

class Demo2 extends StatefulWidget {
const Demo2({super.key});

@OverRide
State createState() => _Demo2State();
}

class _Demo2State extends State {
TooltipBehavior? _tooltipBehavior;
@OverRide
void initState() {
_tooltipBehavior =
TooltipBehavior(enable: true, header: '', canShowMarker: false);
super.initState();
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: _buildDefaultColumnChart(),
);
}

/// Get default column chart
SfCartesianChart _buildDefaultColumnChart() {
return SfCartesianChart(
plotAreaBorderWidth: 0,
title: ChartTitle(
text: 'Population growth of various countries'),
primaryXAxis: const CategoryAxis(
majorGridLines: MajorGridLines(width: 0),
),
primaryYAxis: const NumericAxis(
axisLine: AxisLine(width: 0),
labelFormat: '{value}%',
majorTickLines: MajorTickLines(size: 0)),
series: _getDefaultColumnSeries(),
tooltipBehavior: _tooltipBehavior,
);
}

/// Get default column series
List<ColumnSeries<ChartSampleData, String>> _getDefaultColumnSeries() {
return <ColumnSeries<ChartSampleData, String>>[
ColumnSeries<ChartSampleData, String>(
dataSource: [
ChartSampleData(x: 'China', y: 0),
ChartSampleData(x: 'Brazil', y: 2),
ChartSampleData(x: 'Bolivia', y: 3),
ChartSampleData(x: 'Mexico', y: 4),
ChartSampleData(x: 'Egypt', y: 5),
ChartSampleData(x: 'Mongolia', y: 6),
],
xValueMapper: (ChartSampleData sales, _) => sales.x as String,
yValueMapper: (ChartSampleData sales, _) => sales.y,
dataLabelSettings: const DataLabelSettings(
isVisible: true, textStyle: TextStyle(fontSize: 10)),
)
];
}
}

Hi @lcm1475,

We have validated your query and the attached screenshot. You can achieve your requirement by using the _CustomColumnSeriesRenderer in the onCreateRenderer callback of the ColumnSeries. By using this, you can customize the height of the segmentRect in the onPaint method of _CustomColumnPainter when the dataSource of the y value is 0 to display the column chart. We have shared a code snippet, screenshot, user guide documentation link, and a sample for your reference below. Please let us know if you have any further needs.

UG Link for onCreateRenderer callback in the ColumnSeries: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreaterenderer

Code Snippet:

ColumnSeries<ChartSampleData, String>(
  dataSource: [
    ChartSampleData(x: 'China', y: 0),
    ChartSampleData(x: 'Brazil', y: 4),
    ChartSampleData(x: 'Bolivia', y: 0),
    ChartSampleData(x: 'Mexico', y: 6),
    ChartSampleData(x: 'Egypt', y: 5),
    ChartSampleData(x: 'Mongolia', y: 0),
  ],
  xValueMapper: (ChartSampleData sales, _) => sales.x,
  yValueMapper: (ChartSampleData sales, _) => sales.y,
  borderColor: Colors.orangeAccent,
  borderWidth: 2,
  color: Colors.orange.shade100,
  borderRadius: BorderRadius.circular(borderRadius),
  onCreateRenderer: (ChartSeries series) {
    return _CustomColumnSeriesRenderer();
  },
),

const double borderRadius = 15;

class _CustomColumnSeriesRenderer extends ColumnSeriesRenderer<ChartSampleData, String> {
  _CustomColumnSeriesRenderer();

  @override
  ColumnSegment<ChartSampleData, String> createSegment() {
    return _ColumnCustomPainter();
  }
}

class _ColumnCustomPainter extends ColumnSegment<ChartSampleData, String> {
  _ColumnCustomPainter();

  @override
  void onPaint(Canvas canvas) {
    if (segmentRect!.height == 0) {
      segmentRect = RRect.fromLTRBAndCorners(
        segmentRect!.left,
        segmentRect!.top - 40,
        segmentRect!.right,
        segmentRect!.bottom,
        topLeft: const Radius.circular(borderRadius),
        topRight: const Radius.circular(borderRadius),
        bottomLeft: const Radius.circular(borderRadius),
        bottomRight: const Radius.circular(borderRadius),
      );
    }
    super.onPaint(canvas);
  }
}

Screenshot:

Regards,
Lokesh P.

columnchart_yvalue.zip