bracketryjs

Visualize a knockout tournament in the browser

Highlighting works by default. It means that corresponding connecting lines will attain a "highlighted" color when you click a side of a match. This page describes some subtle aspects of this stuff.

For this set "disableHighlight" option to true. This may be useful for instance if you want to make the players' titles behave like links to players' profiles. (See getPlayerTitleHTML option).

See onMatchClick and onMatchSideCLick

highlightContestantHistory lifecycle method is responsible for this.

Highlighted connection lines will attain the color of highlightedConnectionLinesColor. (And the width will be the same as that of a regular connection line - connectionLinesWidth). Players' titles of a highlighted team will attain a color of highlightedPlayerTitleColor

...
const options = {
    highlightedConnectionLinesColor: 'pink',
    highlightedPlayerTitleColor: '#8f04ff',
    connectionLinesWidth: 5
}

createBracket(data, wrapper, options)