Articles in this section
Category / Section

How to render a customized column chart (SfCartesianChart)

5 mins read

In this article, we explain how to render a customized column chart using the Flutter cartesian chart.

The SfCartesianChart widget has the onCreateRenderer callback in the series, using this you can customize the rendering of the series.

The following steps explain how to render customized ColumnSeries in the SfCartesianChart widget. 

Step 1: Create a renderer class _CustomColumnSeriesRenderer  extends from ColumnSeriesRenderer, In the createSegment override method, return the customized column segments. Here we have returned the _ColumnCustomPainter class.

class _CustomColumnSeriesRenderer<T, D> extends ColumnSeriesRenderer<T, D> {
  _CustomColumnSeriesRenderer();
 
  @override
  ColumnSegment<T, D> createSegment() {
    return _ColumnCustomPainter();
  }
}

Step 2: Then create a class _ColumnCustomPainter extends from ColumnSegment, inside this class you can access series properties such as animationFactorcurrentSegmentIndex, fillPaint, points, segmentRect, strokePaint, and the methods below,

Inside this class declare the list of color values that is used to apply color while rendering the column segment, then get the currentSegmentIndex which is used to apply the color based on the index value and the getFillPaint method to apply the color, painting style to the current segment.

class _ColumnCustomPainter<T, D> extends ColumnSegment<T, D> {
List<Color> colorList = <Color>[
    const Color.fromRGBO(53, 92, 125, 1),
    const Color.fromRGBO(192, 108, 132, 1),
    const Color.fromRGBO(246, 114, 128, 1),
    const Color.fromRGBO(248, 177, 149, 1),
    const Color.fromRGBO(116, 180, 155, 1)
  ];
  @override
  int get currentSegmentIndex => super.currentSegmentIndex;
 
  @override
  Paint getFillPaint() {
    final Paint customerFillPaint = Paint();
    customerFillPaint.isAntiAlias = false;
    customerFillPaint.color = colorList[currentSegmentIndex];
    customerFillPaint.style = PaintingStyle.fill;
    return customerFillPaint;
  }
}

Step 3: Declare the override method onPaint inside the _ColumnCustomPainter class, using this you can draw the customized column. In this method, we have created a custom path using the column segment value and drawn with the help of canvas.

@override
  void onPaint(Canvas canvas) {
    double x, y;
    x = segmentRect!.center.dx;
    y = segmentRect!.top;
    double width = 0;
    const double height = 20;
    width = segmentRect!.width;
    final Paint paint = Paint();
    paint.color = getFillPaint().color;
    paint.style = PaintingStyle.fill;
    final Path path = Path();
    final double factor = segmentRect!.height * (1 - animationFactor);
    path.moveTo(x - width / 2, y + factor + height);
    path.lineTo(x, (segmentRect!.top + factor + height) - height);
    path.lineTo(x + width / 2, y + factor + height);
    path.lineTo(x + width / 2, segmentRect!.bottom + factor);
    path.lineTo(x - width / 2, segmentRect!.bottom + factor);
    path.close();
    canvas.drawPath(path, paint);
  }

Step 4: Now create the SfCartesianChart widget with ColumnSeries and use the onCreateRenderer callback to return the _CustomColumnSeriesRenderer class.

SfCartesianChart(
      series: <ColumnSeries<ChartSampleData, String>>[
        ColumnSeries<ChartSampleData, String>(
          onCreateRenderer: (ChartSeries<ChartSampleData, String> series) {
            return _CustomColumnSeriesRenderer();
          },
          // Other required properties
        )
      ],
    )

 

Thus, the customized column series rendering is achieved by onCreateRenderer callback in the series by returning the series renderer.

Flutter chart with customized column series

View the sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied