How to customize the Flutter Spark bar charts (SfSparkBarChart) ?

This article explains how to customize the Flutter Spark bar charts (SfSparkBarChart).

SfSparkBarChart widget renders the spark bar type series. Here, we have depicted the options to customize the highest, lowest, negative, first, last point colors and for the axis crossing.

Initially, declare and initialize the SfSparkBarChart widget and bind the data source.

The following article explains about how to bind the data source in different ways to the spark charts widget.

https://www.syncfusion.com/kb/12317/how-to-bind-data-to-the-flutter-sparkline-chart-sfsparklinechart

The color property is used to customize the appearance of the bar chart.

 SfSparkBarChart.custom(
 // Renders the bar series in the red color
  color: Colors.red.withOpacity(0.5),
),

Screenshot

Using the firstPointColor and lastPointColor properties, customize the appearance first and last point colors of the bar chart, respectively.

 SfSparkBarChart.custom(
  // First point alone renders in red color
  firstPointColor: Colors.red,
  // Last point alone renders in yellow color
  lastPointColor: Colors.yellow,
),

Screenshot

Using the lowPointColor and highPointColor properties, customize the appearance of the  lowest and highest point colors of the bar chart, respectively.

 SfSparkBarChart.custom(
  // Low point alone renders in red color.
  lowPointColor: Colors.red,
  // High point alone renders in yellow color.
  highPointColor: Colors.yellow,
),

Screenshot

Use the negativePointColor property to customize the appearance of negative values alone.

 SfSparkBarChart.custom(
  // Negative points alone render in red color.
  negativePointColor: Colors.red,
  ),

Screenshot

The axis position is rendered to the minimum y-axis value. By using this axis-crossing feature, you can customize the axis to the required position. To render the axis in a particular position use axisCrossesAt property in the SfSparkBarChart widget.

 SfSparkBarChart.custom(
  // Axis will be rendered at where y-value as 10.
  axisCrossesAt: 10
  ),

Screenshot

View the sample in GitHub.