How to Customize the Flutter SparkBarChart (SfSparkBarChart)?

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

The SfSparkBarChart widget renders spark bar type series. Here, we'll explore options to customize the highest, lowest, negative, first, last point colors, and 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://support.syncfusion.com/kb/article/10813/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 of 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

By default, the axis position is rendered at the minimum y-axis value. Using the axis-crossing feature, you can customize the axis to the required position. To render the axis at a particular position, use the axisCrossesAt property:

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

Screenshot

View the Github Sample here.