alternative to deprecated Highcharts.each when using arrays within an array

Question

I'm using a simple Highcharts column chart to display a single series set of data. an array that's external to Highcharts is being used to generate a tooltip for each column when hovered over. There is a column for each month of the year. Everything works great when using the 'Highcharts.each' function within the tooltip pointFormatter. Each monthly column displays the proper stock tickers for that particular month: for instance when hovering over the "January" chart column, the tooltip displays "January" on the top line and "CMA, OMC, DIS, JPM," on the next line within the tooltip. Note: the last 6 months of the year are still in the future at this point so that's why the last 6 elements in the 'tooltip_ticks' array have empty values.

var tooltip_ticks = 
[["CMA","OMC","DIS","JPM"],
["TXN","ABBV","SPG"],
["ENB","TJX","TGT","MMM","MSFT","VBR","ED","HD","AVGO","VTV"],
["CMA","OMC","FXAIX","JPM"],
["CVS","ABBV","TXN"],
["ENB","WFC","PFE","TGT","MSFT","MMM","ED","HD"],
"","","","","",""]
.
.
.
        tooltip: {
            useHTML: true,
            pointFormatter: function() {
                var string = '';
                Highcharts.each(tooltip_ticks[this.series.data.indexOf(this)], function(tick) { 
                    string += tick + ', '
                });
                return string;
            }
        }

the Highcharts.each function has been deprecated. I have spent nearly 2 hours and multiple code iterations trying to figure out how to replicate the code above using the js Array.forEach function. One example:

            pointFormatter: function() {
                var string = '';
                tooltip_ticks.forEach(function(tick) {  
                    string += tick + ', '
                });
                return string;
            }

This creates a tooltip for each month, but each monthly tooltip includes ALL the elements in the 'tooltip_ticks' array. I can't figure out how to get the proper monthly sub-array index so that just the singular month's worth of tickers is displayed in each tooltip. In other words, the equivalent of this

tooltip_ticks[this.series.data.indexOf(this)]

Do I need to do some sort of 'For' loop inside the forEach function because the sub-arrays need to be looped over and the sub-array elements extracted one by one?

I would classify my experience level using js and/or Highcharts charting library as 'beginner', so not exactly novice but still in the early learning mode. any help/advice would be greatly appreciated.

Could you reproduce your code with the sample data on some online editor which I could work on? It will be much easier to find a satisfied solution. — Sebastian Wędzel
– Sebastian Wędzel, Commented Jun 29, 2020 at 16:25
thanks @SebastianWędzel for your interest in helping, but after a good night's sleep I was able to figure it out. I posted my solution in the event it may help someone in the future with a similar issue. — WillTron
– WillTron, Commented Jun 30, 2020 at 16:53

WillTron · Accepted Answer · 2020-06-30 16:51:29Z

Well after posting this question and re-reading it the following day I was able to see it from a new perspective and came up with the following solution to the deprecated Highcharts.each function as it relates to my situation. The key was using the this.series.data.indexOf(this) parameter along with the array.forEach function. As an aside, I also added a short conditional to take care of the trailing commas that result from looping through the last sub-array element for each data point

                tooltip: {
                  useHTML: true,
                  headerFormat: '<b>{point.x}</b><br/>',
                  pointFormatter: function() {
                    var string = '';
                    var i = this.series.data.indexOf(this);
                    var ticks = tooltip_ticks[i];

                    ticks.forEach(function(tick, index) {
                          if (index != ticks.length - 1) {
                            string += tick + ', ';
                          } else {
                            string += tick;
                          }
                    });
                    return string;
                    
                  }
                }

Collectives™ on Stack Overflow

alternative to deprecated Highcharts.each when using arrays within an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related