Visualize a knockout tournament in the browser

How to (un)highlight team's history

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.

You can disable it

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).

It is auto-disabled when custom match (or side) click handlers is provided

See onMatchClick and onMatchSideCLick

You can highlight programmatically

highlightContestantHistory lifecycle method is responsible for this.

Colors are adjustable

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)

↓