How to render a customized column chart (SfCartesianChart)
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 animationFactor, currentSegmentIndex, fillPaint, points, segmentRect, strokePaint, and the methods below,
- calculateSegmentPoint for calculating the segment bound.
- getFillPaint for getting the fill color of the current segment.
- getStrokePaint for getting the border color of the current series.
- onPaint for rendering a column series.
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.
