Chord diagrams on top

Place the chord-diagram catalogue above the first system so every voicing is visible before the reader hits the first bar — the go-to layout for a chord-melody arrangement where the player wants each shape available up front. Turn the top grid off to keep diagrams inline, where each shape appears only above the bar that first references it — the layout most rhythm charts prefer.

• Diagrams on top
• Diagrams inline

Above the score vs inline

score.stylesheet.globalDisplayChordDiagramsOnTop is a boolean that governs the top-of-score placement. When true (default), alphaTab collects every chord defined in the score and renders the diagram grid above the first system. When false, the grid disappears — chords still appear inline above the bars where they are first used, driven by globalDisplayChordDiagramsInScore.

Two related fields sit alongside it:

• globalDisplayChordDiagramsInScore — score-wide toggle for the inline diagrams above bars (off by default).
• perTrackChordDiagramsOnTop — a Map<number, boolean> keyed by track index, overriding the global flag per track. Leave it null to fall back to the global setting.

The typical songbook look combines the top grid (on) with inline diagrams (off); a Nashville-style chord chart flips both.

Show it in code

import * as alphaTab from '@coderline/alphatab';

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
  core: { file: '/scores/song.gp' },
});

api.scoreLoaded.on((score) => {
  score.stylesheet.globalDisplayChordDiagramsOnTop = false;
  score.stylesheet.globalDisplayChordDiagramsInScore = true;
  api.render();
});

getAlphaTabContainer() is a placeholder for the platform-specific step of obtaining the render target — a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android. Every other line runs unchanged on all three runtimes.

Where to look next

• Chord diagrams and chord names — the notation coverage page for chord elements.
• Toggling notation elements off — hide EffectChordDiagrams or EffectChordNames score-wide through notation.elements.
• globalDisplayChordDiagramsOnTop, globalDisplayChordDiagramsInScore, and perTrackChordDiagramsOnTop on the RenderStylesheet reference.
• scoreLoaded and render — the API surface used above.