code: function initHighlightComponents() {
              highlightCircle = svg.select('.metadata-group')
                  .selectAll('circle.highlight-circle')
                  .data([1])
                  .enter()
                    .append('circle')
                      .attr('class', 'highlight-circle')
                      .attr('cursor', 'pointer');
  
              if (hasCrossHairs) {
                  // initialize cross hair lines container
                  highlightCrossHairContainer = svg.select('.chart-group')
                    .append('g')
                      .attr('class', 'crosshair-lines-container');
  
                  // initialize corss hair labels container
                  highlightCrossHairLabelsContainer = svg.select('.metadata-group')
                    .append('g')
                      .attr('class', 'crosshair-labels-container');
  
                  highlightCrossHairContainer.selectAll('line.highlight-y-line')
                    .data([1])
                    .enter()
                    .append('line')
                      .attr('class', 'highlight-y-line');
  
                  highlightCrossHairContainer.selectAll('line.highlight-x-line')
                    .data([1])
                    .enter()
                    .append('line')
                      .attr('class', 'highlight-x-line');
  
                  highlightCrossHairLabelsContainer.selectAll('text.highlight-y-legend')
                    .data([1])
                    .enter()
                    .append('text')
                        .attr('class', 'highlight-y-legend');
  
                  highlightCrossHairLabelsContainer.selectAll('text.highlight-x-legend')
                    .data([1])
                    .enter()
                    .append('text')
                      .attr('class', 'highlight-x-legend');
              }
          }
docs: Places the highlighter point to the DOM
  to be used once one of the data points is
  highlighted
  @return {void}
  @private