How to show tracker for different x value when using StackedColumnSeries?

In this article, we will explain how to implement trackers for different x values in StackedColumnSeries using the isTrackVisible property of ColumnSeries.

Trackers in charts help highlight specific data points, making the data easier to interpret. In Flutter, the SfCartesianChart's StackedColumnSeries is ideal for visualizing layered data, but it doesn’t directly support trackers for individual x values. By using an overlaid ColumnSeries with the isTrackVisible property enabled, we can provide detailed trackers for various x-axis points.

The following steps will explain how to show tracker for different x values for StackedColumnSeries by using ColumnSeries .

Step 1: Define column chart with initial zero y values

First, define the data for the base tracker series, setting the y values to 0 as the tracker base. Then, create an SfCartesianChart with ColumnSeries , binding the x and y values using the xValueMapper and yValueMapper properties.

List<ChartData> columnData = [
   ChartData(DateTime(2023, 02, 02, 05), 0),
   ChartData(DateTime(2023, 02, 02, 06), 0),
   ChartData(DateTime(2023, 02, 02, 07), 0),
   ChartData(DateTime(2023, 02, 02, 08), 0),
   ChartData(DateTime(2023, 02, 02, 09), 0),
 ];

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfCartesianChart(
       primaryXAxis: const DateTimeAxis(),
       primaryYAxis: const NumericAxis(),
       series: <CartesianSeries<ChartData, DateTime>>[
         ColumnSeries<ChartData, DateTime>(
           dataSource: columnData,
           xValueMapper: (ChartData data, int index) => data.x,
           yValueMapper: (ChartData data, int index) => data.y,
           .....

class ChartData {
 ChartData(this.x, this.y);

 final DateTime x;
 final double y;
} 

Step 2: Enable side by side series placement to false for the cartesian chart

Set enableSideBySideSeriesPlacement to false to stacks the columns vertically in a chart instead of placing them side by side.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfCartesianChart(
     enableSideBySideSeriesPlacement: false,  
     ..... 

Step 3: Enable tracker visibility in column series

In the ColumnSeries , set the isTrackVisible property to true to display the tracker bar at each specified x value and set isVisibleInLegend to false to hide the series visibility.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfCartesianChart(
       series: <CartesianSeries<ChartData, DateTime>>[
         ColumnSeries<ChartData, DateTime>(
           isTrackVisible: true,
           isVisibleInLegend: false,
           ..... 

Step 4: Add stacked column series with different x values

Define chart data and add multiple StackedColumnSeries to the SfCartesianChart. Configure each series’ data, binding x and y values using the xValueMapper and yValueMapper properties. Set enableSideBySideSeriesPlacement to false to stack the columns properly

List<ChartData> stackedColumnData1 = [
   ChartData(DateTime(2023, 02, 02, 05), 35),
   ChartData(DateTime(2023, 02, 02, 06), 28),
   ChartData(DateTime(2023, 02, 02, 08), 34),
 ];
 List<ChartData> stackedColumnData2 = [
   ChartData(DateTime(2023, 02, 02, 05), 35),
   ChartData(DateTime(2023, 02, 02, 06), 28),
   ChartData(DateTime(2023, 02, 02, 07), 34),
 ];
 List<ChartData> stackedColumnData3 = [
   ChartData(DateTime(2023, 02, 02, 06), 35),
   ChartData(DateTime(2023, 02, 02, 07), 28),
   ChartData(DateTime(2023, 02, 02, 09), 120),
 ];

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfCartesianChart(
       series: <CartesianSeries<ChartData , DateTime>>[
            ColumnSeries<ChartData , DateTime>(
               dataSource: columnData,
               xValueMapper: (ChartData data, int index) => data.x,
               yValueMapper: (ChartData data, int index) => data.y,
               isTrackVisible: true,
               isVisibleInLegend: false,
             ),
             StackedColumnSeries<ChartData , DateTime>(
               dataSource: stackedColumnData1,
               xValueMapper: (ChartData data, int index) => data.x,
               yValueMapper: (ChartData data, int index) => data.y,
             ),
             StackedColumnSeries<ChartData , DateTime>(
               dataSource: stackedColumnData2,
               xValueMapper: (ChartData data, int index) => data.x,
               yValueMapper: (ChartData data, int index) => data.y,
             ),
             StackedColumnSeries<ChartData , DateTime>(
               dataSource: stackedColumnData3,
               xValueMapper: (ChartData data, int index) => data.x,
               yValueMapper: (ChartData data, int index) => data.y,
               .....

Now, show tracker for different x value when using StackedColumnSeries have been implemented as shown below.

View the sample in GitHub

Conclusion

I hope you enjoyed learning about how to show tracker for different x value when using StackedColumnSeries in Flutter Cartesian Chart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our
support forums, Direct-Trac, or feedback portal. We are always happy to assist you!