Single Elimination Tournament Bracket Generator In jQuery - Gracket.js

Gracket.js is a small jQuery bracket plugin to dynamically generate a customizable single-elimination tournament bracket on the webpage.

The plugin makes use of HTML5 canvas to build the bracket structure with several useful options.

How to use it:

1. Insert the minified version of the Gracket.js library after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.gracket.min.js"></script>

2. Prepare your data (team/player name, ID, seed, etc) for the tournament bracket.

myData = [
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1, "displaySeed": "D1", "score" : 47 }, {"name" : "Andrew Miller", "id" : "andrew-miller", "seed" : 2} ],
    [ {"name" : "James Coutry", "id" : "james-coutry", "seed" : 3}, {"name" : "Sam Merrill", "id" : "sam-merrill", "seed" : 4}],
    [ {"name" : "Anothy Hopkins", "id" : "anthony-hopkins", "seed" : 5}, {"name" : "Everett Zettersten", "id" : "everett-zettersten", "seed" : 6} ],
    [ {"name" : "John Scott", "id" : "john-scott", "seed" : 7}, {"name" : "Teddy Koufus", "id" : "teddy-koufus", "seed" : 8}],
    [ {"name" : "Arnold Palmer", "id" : "arnold-palmer", "seed" : 9}, {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10} ],
    [ {"name" : "Jesse James", "id" : "jesse-james", "seed" : 1}, {"name" : "Scott Anderson", "id" : "scott-anderson", "seed" : 12}],
    [ {"name" : "Josh Groben", "id" : "josh-groben", "seed" : 13}, {"name" : "Sammy Zettersten", "id" : "sammy-zettersten", "seed" : 14} ],
    [ {"name" : "Jake Coutry", "id" : "jake-coutry", "seed" : 15}, {"name" : "Spencer Zettersten", "id" : "spencer-zettersten", "seed" : 16}]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}, {"name" : "James Coutry", "id" : "james-coutry", "seed" : 3} ],
    [ {"name" : "Anothy Hopkins", "id" : "anthony-hopkins", "seed" : 5}, {"name" : "Teddy Koufus", "id" : "teddy-koufus", "seed" : 8} ],
    [ {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10}, {"name" : "Scott Anderson", "id" : "scott-anderson", "seed" : 12} ],
    [ {"name" : "Sammy Zettersten", "id" : "sammy-zettersten", "seed" : 14}, {"name" : "Jake Coutry", "id" : "jake-coutry", "seed" : 15} ]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}, {"name" : "Anothy Hopkins", "id" : "anthony-hopkins", "seed" : 5} ],
    [ {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10}, {"name" : "Sammy Zettersten", "id" : "sammy-zettersten", "seed" : 14} ]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}, {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10} ]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1} ]
  ]
];

3. Create an empty gracket element in which the Tournament Bracket will generate.

<div class="my_gracket"></div>

4. Call the function to render a basic Tournament Bracket inside the element. Make sure the min-width of the .gracket h3 element is set to width of the largest name/player. Gracket needs to build its canvas based on the width of the largest element.

$(".my_gracket").gracket({ 
  src: myData
});

5. Apply your own styles to the Tournament Bracket.

.g_gracket {
  width: 9999px;
  background-color: #fff;
  padding: 55px 15px 5px;
  line-height: 100%;
  position: relative;
  overflow: hidden;
}

.g_round {
  float: left;
  margin-right: 70px;
}

.g_game {
  position: relative;
  margin-bottom: 15px;
}

.g_gracket h3 {
  margin: 0;
  padding: 10px 8px 8px;
  font-size: 18px;
  font-weight: normal;
  color: #fff
}

.g_team {
  background: #3597AE;
}

.g_team:last-child {
  background: #FCB821;
}

.g_round:last-child {
  margin-right: 20px;
}

.g_winner {
  background: #444;
}

.g_winner .g_team {
  background: none;
}

.g_current {
  cursor: pointer;
  background: #A0B43C!important;
}

.g_round_label {
  top: -5px;
  font-weight: normal;
  color: #CCC;
  text-align: center;
  font-size: 18px;
}

6. Available options to customize the Tournament Bracket.

$(".my_gracket").gracket({ 

  // default CSS classes
  gracketClass : "g_gracket",
  gameClass : "g_game",
  roundClass : "g_round",
  roundLabelClass : "g_round_label",
  teamClass : "g_team",
  winnerClass : "g_winner",
  spacerClass : "g_spacer",
  currentClass : "g_current",
  seedClass : "g_seed",

  // radius in pixels
  cornerRadius : 15,

  // canvas options
  canvasId : "g_canvas",
  canvasClass : "g_canvas",
  canvasLineColor : "#eee",
  canvasLineCap : "round",
  canvasLineWidth : 2,
  canvasLineGap : 15,

  // an array of round labels
  roundLabels : []
  
});

---

This awesome jQuery plugin is developed by Zettersten. For more Advanced Usages, please check the demo page or visit the official website.