code: function highlightDataPoints({values}) {
              let accumulator = 0;
  
              cleanDataPointHighlights();
  
              // ensure order stays constant
              let sortedValues = order.reduce((acc, current) => {
                  return [...acc, values.find(({name}) => name === current)];
              },[]);
  
              sortedValues.forEach((d, index) => {
                  let marker = verticalMarkerContainer
                      .append('g')
                      .classed('circle-container', true)
                          .append('circle')
                          .classed('data-point-highlighter', true)
                          .attr('cx', highlightCircleSize)
                          .attr('cy', 0)
                          .attr('r', highlightCircleRadius)
                          .style('stroke-width', highlightCircleStroke)
                          .style('stroke', categoryColorMap[d.name])
                          .style('cursor', 'pointer')
                          .on('click', function() {
                              addGlowFilter(this);
                              handleHighlightClick(this, d);
                          })
                          .on('mouseout', function() {
                              removeFilter(this);
                          });
  
                  accumulator = accumulator + sortedValues[index][valueLabel];
  
                  marker.attr('transform', `translate( ${(- highlightCircleSize)}, ${(yScale(accumulator))} )` );
              });
          }
docs: Creates coloured circles marking where the exact data y value is for a given data point
  @param  {obj} dataPoint Data point to extract info from
  @private