S&P 500 Returns After Charge Cuts: Visualized Utilizing a Flutter Heatmap

Welcome to our Chart of the Week weblog sequence!

Charts provide a robust means to symbolize advanced datasets visually, aiding within the understanding and interpretation of data. In industries like enterprise, schooling, and analysis, charts play an important position in remodeling uncooked information into visually compelling graphics, uncovering traits which will in any other case go unnoticed.

On this weblog, we’ll stroll you thru making a threat warmth map utilizing the Syncfusion Flutter 100% Stacked Bar Chart to showcase S&P 500 returns after rate of interest cuts over time.

100% Stacked Bar Chart

The StackedBar100Series shows information as horizontal bars, the place every bar represents the proportion distribution of classes inside a complete.

Right here, we use this chart to create a threat warmth map that highlights the variations in S&P 500 returns after rate of interest cuts over completely different time intervals—3 months, 6 months, and 1 12 months. By making use of coloration coding and percentages, the chart successfully reveals the inventory market’s relative efficiency over a long time.

Coloration mapping

Coloration performs an important position in making a threat heatmap impact. By making use of conditional coloration coding, we will visually differentiate varied threat ranges, resembling low, medium, and excessive threat, making it simpler to determine and assess patterns or important factors at a look.

On this visualization, we use the pointColorMapper property to assign particular colours to information factors based mostly on their values or predefined circumstances. This coloration mapping approach provides a layer of visible which means, permitting for fast interpretation of threat ranges. Utilizing coloration this manner makes the knowledge extra intuitive, enhancing readability and making it simpler to grasp.

Axes configuration

Axes play an important position in enhancing a chart’s readability. By configuring the axes and their labels, we be certain that the info is introduced in an organized and understandable method.

On this visualization, we configure the y-axis with multi-level labels to symbolize the time frames: 3 months, 6 months, and 1 12 months after the speed minimize. These multi-level labels assist arrange the info into significant intervals, making it simpler for viewers to interpret the info by way of time. By adjusting the y-axis this manner, the chart clearly exhibits how S&P 500 returns developed over completely different intervals following the speed minimize.

100% Stacked Bar sequence renderer

The onCreateRenderer callback permits you to assign a customized sequence renderer to render distinctive shapes for every section by making a customized renderer class, resembling _HeatmapSeriesRenderer, which extends StackedBar100SeriesRenderer.

On this customized renderer, the important thing strategies embrace populateDataSource, which effectively converts and updates uncooked information right into a structured format for dynamic and interactive chart rendering. The customized sequence permits you to create distinctive visible results to your chart by extending the default chart sequence conduct.

Right here, we’ll create threat warmth maps to visualise the S&P 500 returns after a price minimize. By utilizing a customized sequence renderer, we will guarantee equal top for every stacked bar to create the warmth map impact. This entails adjusting the mounted place and dimensions.

Confer with the next picture.

Earlier than continuing, consult with our earlier weblog on the way to create an interactive warmth map utilizing Flutter Charts. 

Let’s get began!

Step 1: Gathering information on S&P 500 efficiency

Gather information on the S&P 500 efficiency following rate of interest cuts during the last 5 a long time from S&P 500-rate-cuts. Manage this info into an inventory that features the 12 months of the first-rate minimize and the returns for 3 months, 6 months, and 1 12 months after the speed minimize.

Step 2: Initializing the info for the chart

Now, create a _HeatMapData mannequin that incorporates particulars of the three months after the primary price minimize, 6 months after the primary price minimize, one 12 months after the primary price minimize, and the 12 months when the info was recorded. 

Confer with the next code instance.

class _HeatMapData {
  _HeatMapData(this.12 months, this.threeMonths, this.sixMonths, this.oneYear);

  remaining DateTime 12 months;
  remaining num threeMonths;
  remaining num sixMonths;
  remaining num oneYear;
}

Subsequent, create an inventory to carry the S&P 500 returns after rate of interest cuts information and the 12 months the info was recorded, which would be the supply of the Flutter Chart.

Confer with the next code instance.

 Checklist <_HeatMapData>? _heatMapData;

 @override
 void initState() {
    _heatMapData = <_HeatMapData>[
      _HeatMapData(DateTime(1973), -10.2, -6.2, -36.0),
      _HeatMapData(DateTime(1974), -14.7, -15.3, 7.5),
      _HeatMapData(DateTime(1980), 15.0, 28.9, 30.3),
      _HeatMapData(DateTime(1981), -11.0, -7.9, -17.8),
      _HeatMapData(DateTime(1982), -4.8, 17.4, 36.5),
      _HeatMapData(DateTime(1987), 0.1, 1.7, 7.5),
      _HeatMapData(DateTime(1989), 7.4, 7.5, 11.9),
      _HeatMapData(DateTime(1995), 10, 5.1, 13.4),
      _HeatMapData(DateTime(1998), 17.2, 26.5, 27.3),
      _HeatMapData(DateTime(2001), -16.3, -12.4, -14.9),
      _HeatMapData(DateTime(2007), -4.4, -11.8, -27.2),
      _HeatMapData(DateTime(2019), 3.8, 13.3, 14.5),
    ];
    tremendous.initState();
 }

Step 3: Construct the Flutter 100% Stacked Bar Chart

To create a threat warmth map, we’ll use three StackedBar100Series to visualise S&P 500 returns following a price minimize. The DateTimeCategoryAxis on the X-axis shows non-linear date intervals, whereas the NumericAxis on the Y-axis exhibits descriptive time intervals (3 months, 6 months, and 1 12 months) after price cuts. This axis configuration might be defined later.

Confer with the next code instance.

SfCartesianChart _buildHeatmapChart() {
  return SfCartesianChart(
    primaryXAxis: DateTimeCategoryAxis(),
    primaryYAxis: NumericAxis(),
    sequence: _buildHeatmapSeries(),
  );
}

Checklist<CartesianSeries<_HeatMapData, DateTime>> _buildHeatmapSeries() {
  return <CartesianSeries<_HeatMapData, DateTime>>[
    for (int i = 0; i < 3; i++)
      StackedBar100Series<_HeatMapData, DateTime>(
        dataSource: _heatMapData!,
        xValueMapper: (_HeatMapData data, int index) => data.year,
        yValueMapper: (_HeatMapData data, int index) => _yValue(data, i),
        name: _seriesName(i),
      ),
  ];
}

num _yValue(_HeatMapData information, int seriesIndex) {
  swap (seriesIndex) {
    case 0:
      return information.threeMonths;
    case 1:
      return information.sixMonths;
    case 2:
      return information.oneYear;
    default:
      return 0;
  }
}

String _seriesName(int seriesIndex) {
  swap (seriesIndex) {
    case 0:
      return '3 Months After First Charge Minimize';
    case 1:
      return '6 Months After First Charge Minimize';
    case 2:
      return '1 12 months After First Charge Minimize';
    default:
      return '';
  }
}

Confer with the next picture.

Step 4: Making a customized warmth map sequence renderer

The onCreateRenderer callback allows the creation of a customized warmth map sequence renderer, permitting you to render distinctive shapes for the segments. To attain this, we’ll outline a customized renderer class, resembling _HeatmapSeriesRenderer, that extends the StackedBar100SeriesRenderer class.

Confer with the next code instance.

Checklist<CartesianSeries<_HeatMapData, DateTime>> _buildHeatmapSeries() {
   return <CartesianSeries<_HeatMapData, DateTime>>[
     for (int i = 0; i < 3; i++)
     StackedBar100Series<_HeatMapData, DateTime>(
       dataSource: _heatMapData!,
       xValueMapper: (_HeatMapData data, int index) => data.year,
       yValueMapper: (_HeatMapData data, int index) => _yValue(data, i),
       animationDuration: 0,
       name: _seriesName(i),
       onCreateRenderer: (ChartSeries<_HeatMapData, DateTime> series) {
         return _HeatmapSeriesRenderer();
       },
     ),
  ];
}

Calculate the default vary

The warmth map visualization wants to take care of a constant worth vary to make sure correct coloration illustration.

• We override the populateDataSource methodology to set a hard and fast vary for the y-axis values.
• The yMin is about to 0, and the yMax is about to 100, which means the warmth map will all the time symbolize values inside this vary, even when damaging values are current within the dataset. This step helps hold the chart balanced, making it simpler to check completely different information factors.

class _HeatmapSeriesRenderer
  extends StackedBar100SeriesRenderer<_HeatMapData, DateTime> {
  _HeatmapSeriesRenderer();

  @override
  void populateDataSource(
   [List<ChartValueMapper<_HeatMapData, num>>? yPaths,
    List<List<num>>? chaoticYLists,
    List<List<num>>? yLists,
    List<ChartValueMapper<_HeatMapData, Object>>? fPaths,
    List<List<Object?>>? chaoticFLists,
    List<List<Object?>>? fLists]) {
   tremendous.populateDataSource(
    yPaths, 
chaoticYLists, 
yLists, 
fPaths, 
chaoticFLists, 
fLists
);

  // All the time hold constructive 0 to 100 vary even set damaging worth.
  yMin = 0;
  yMax = 100;

  // Calculate heatmap section prime and backside values.
  _computeHeatMapValues();
}

Calculate the warmth map values

We calculate the highest and backside values for every section utilizing the _computeHeatMapValues() methodology, guaranteeing they’re evenly distributed, which makes the chart visually balanced.

The peak of every section is set utilizing the method yValue = 100 / seriesLength, the place seriesLength is the variety of sequence depending on the y-axis. For every sequence, we skip these that aren’t seen or haven’t any information, then assign the underside worth based mostly on its place and set the highest worth as stackValue + yValue.

Lastly, we loop via the info factors and apply these values, guaranteeing all segments keep a constant top throughout the heatmap.

Confer with the next code instance.

void _computeHeatMapValues() {
    if (xAxis == null || yAxis == null) {
      return;
    }

    if (yAxis!.dependents.isEmpty) {
      return;
    }

    // Get the variety of sequence depending on the yAxis.
    remaining int seriesLength = yAxis!.dependents.size;
    // Calculate the proportional top for every sequence
    // (as a proportion of the overall top).
    remaining num yValue = 100 / seriesLength;
    // Loop via every dependent sequence to calculate prime and backside values 
    // for the heatmap.
    for (int i = 0; i < seriesLength; i++) {
      // Test if the present sequence is a '_HeatmapSeriesRenderer'.
      if (yAxis!.dependents[i] is _HeatmapSeriesRenderer) {
        remaining _HeatmapSeriesRenderer present =
            yAxis!.dependents[i] as _HeatmapSeriesRenderer;

        // Skip processing if the sequence shouldn't be seen or has no information.
        if (!present.controller.isVisible || present.dataCount == 0) 
        {
          proceed;
        }

        // Calculate the underside (stack) worth for the present sequence.
        num stackValue = 0;
        stackValue = yValue * i;

        present.topValues.clear();
        present.bottomValues.clear();

        // Loop via the info factors within the present sequence.
        remaining int size = present.dataCount;
        for (int j = 0; j < size; j++) {
          // Add the underside worth (stackValue) for the present information level.
          present.bottomValues.add(stackValue.toDouble());
          // Add the highest worth (stackValue + yValue) for the present information   level.
          present.topValues.add((stackValue + yValue).toDouble());
        }
      }
    }
  }
}

Confer with the next picture.

Step 5: Customizing the warmth map look

Coloration coding is the essence of a heatmap, permitting customers to rapidly determine threat ranges by glancing at various coloration intensities. On this step, we’ll customise the heatmap’s look and implement dynamic coloration mapping to visually symbolize threat values successfully.

Key customizations for heatmap

The _buildColor perform serves because the spine of the heatmap, mapping threat values to particular coloration intensities. Right here’s the way it works:

• Excessive threat: Damaging values are mapped to shades of pink, representing various threat severity ranges.
• Average threat: Values round zero are mapped to shades of orange, indicating warning.
• Low threat: Optimistic values are mapped to shades of inexperienced, denoting stability or low-risk ranges.

Confer with the next code instance.

Coloration _buildColor(num worth) {
 swap (worth) {
   case var val when val >= 20.0:
    return Colours.inexperienced.shade900; 
   case var val when val >= 15.0:
    return Colours.inexperienced.shade700; 
   case var val when val >= 10.0:
    return Colours.inexperienced.shade500; 
   case var val when val >= 5.0:
    return Colours.inexperienced.shade300;
   case var val when val >= 2.5:
    return Colours.orange.shade200;
   case var val when val > 0.0:
    return Colours.orange.shade400;
   case var val when val >= -2.5:
    return Colours.orange.shade600; 
   case var val when val >= -5.0:
    return Colours.orange.shade800;
   case var val when val >= -10.0:
    return Colours.pink.shade200; 
   case var val when val >= -15.0:
    return Colours.pink.shade400; 
   case var val when val >= -20.0:
    return Colours.pink.shade600; 
   default:
    return Colours.pink.shade800; 
 }
}

Making use of colours to the sequence

Adjusting colours, borders, and labels makes the warmth map clear and simple to grasp. The pointColorMapper property returns the _buildColor perform within the StackedBar100Series, which robotically assigns colours to every section based mostly on its information worth. This helps show completely different depth ranges within the chart.

The width property controls the scale of every section, conserving the structure organized. The borderColor makes the section edges clear.

Confer with the next code instance.

StackedBar100Series<_HeatMapData, DateTime>(
 . . . . . . 
 pointColorMapper: (_HeatMapData information, int index) =>_buildColor(_yValue(information, i)),
 width: 1,
 title: _seriesName(i),
 animationDuration: 0,
 borderColor: Colours.white,
 borderRadius: const BorderRadius.all(Radius.round(10)),
 . . . . . 
),

Confer with the next picture.

Step 6: Customizing different components within the Flutter warmth map chart

To additional improve the looks and interactivity of the Flutter Warmth Map Chart, you possibly can configure the next customizations, as beforehand defined within the weblog Create an Interactive Warmth Map Utilizing Flutter Charts.

1. Axis customization: We’ll customise the axis for a warmth map chart utilizing a numeric axis. You possibly can consult with the earlier weblog to grasp the axis customization and modify it accordingly utilizing the DateTimeCategoryAxis for visualizing the S&P 500 returns.
2. Add information labels: Knowledge labels assist show the values instantly on the chart. The implementation steps stay the identical as mentioned within the earlier weblog. 
3. Add tooltips: Tooltips present further info when hovering over the warmth map cells. You possibly can observe the identical method defined within the earlier weblog to allow tooltips. 

   Confer with the next picture.

   

GitHub reference

For extra particulars, consult with the visualizing the S&P 500 returns after price cuts utilizing warmth maps in Flutter Charts demo on GitHub.

Unlock the ability of Syncfusion’s extremely customizable Flutter widgets.

Attempt It Free

Conclusion

Thanks for studying! On this weblog, we’ve explored the way to visualize the S&P 500 returns after rate of interest cuts by making a Warmth Map utilizing the Syncfusion Flutter 100% Stacked Bar Chart.

The present clients can obtain the brand new model of Important Studio on the License and Downloads web page.  In case you are not a Syncfusion buyer, attempt our 30-day free trial to try our unbelievable options. 

You may as well contact us via our help boards, help portal, or suggestions portal. We’re all the time pleased to help you!