Guitar Chord Chart with Piano Diagrams
This guitar chord chart is an interactive reference that shows any chord on a guitar fretboard and a piano keyboard at the same time. Pick a root note and a chord type and you instantly see the finger positions, the note names, and how the same chord looks on both instruments.
It works for beginners learning their first open chords and for players hunting alternative voicings or inversions. Each chord shows multiple guitar shapes, piano inversions, the interval formula, and a one-tap audio preview so you can hear what you are about to play.
How to Use the Chord Chart
Choose a chord
Pick a root note (C through B, including sharps) from the top row, then a chord type such as Major, Minor, 7, or m7 from the second row. Both the guitar and piano diagrams update instantly.
Read the guitar diagram
Numbered dots show which finger to use (1 = index, 2 = middle, 3 = ring, 4 = pinky). An O above a string means play it open, X means do not play it, and a colored bar marks a barre. Use the arrow buttons to step through different voicings.
Read the piano diagram
The keyboard highlights the keys to press, with the root note emphasized. Switch between Root, 1st, and 2nd to see how the same chord sounds in different inversions.
Hear the chord
Press Play Chord to hear the chord played back. The sound is synthesized in your browser with a slight strum delay, so no audio files are downloaded.
Jump straight to a chord
Type a name like Am7 or Cmaj7 in the search box to go directly to any chord. Flat spellings work too — searching Bb finds the A# chords.
Features
Guitar Chord Diagrams
Clear fretboard diagrams show finger positions with numbered dots, open and muted string markers, and barre bars for every chord.
Piano Chord Diagrams
A keyboard highlights the active notes for each chord, with the root note visually distinguished from the other chord tones.
16 Chord Types
Major, Minor, 7, m7, Maj7, dim, aug, sus2, sus4, 6, m6, 9, add9, 7sus4, dim7, and m7b5 — each available in all 12 keys.
Multiple Voicings
Step through alternative guitar shapes for the same chord, from open positions to barre chords higher up the neck.
Piano Inversions
View each chord in Root position, 1st inversion, and 2nd inversion to see the same notes rearranged.
Audio Playback
Hear any chord instantly using in-browser synthesis with a natural strum delay and harmonic overtones — no sound files loaded.
Chord Formula & Notes
Each chord shows its interval formula (R, 3, 5, b7, and so on) alongside the actual note names to explain how it is built.
Quick Search
Type a chord name like Am7 or Cmaj7 to jump to it instantly, with results appearing as you type.
Enharmonic Search
Search using flat spellings as well as sharps — Bb finds the A# chords and Eb finds the D# chords.
Responsive Layout
Guitar and piano sit side by side on desktop and stack neatly on phones, so the diagrams stay easy to read on any screen.
Frequently Asked Questions
How do you read a guitar chord chart?
Each vertical line is a string and each horizontal line is a fret. The numbered dots show where to place your fingers and which finger to use (1 = index, 2 = middle, 3 = ring, 4 = pinky). Strum from the lowest fretted or open string downward, skipping any string marked with an X.
What do the O and X symbols mean on a chord diagram?
An O above a string means play that string open, without pressing any fret. An X means do not play that string — either mute it or skip it when you strum.
What does the fret number next to a diagram mean?
When a chord is played higher up the neck, the diagram shows the starting fret beside it. So a "3" tells you the top row of the diagram is the 3rd fret rather than the 1st, which is common for barre chords and movable shapes.
What is a chord voicing?
A voicing is one specific way to play a chord on the fretboard. The same chord can be fingered in several positions — for example, an open shape near the nut or a barre shape higher up. Use the arrow buttons on the guitar card to browse the available voicings.
What are chord inversions on the piano?
An inversion changes which chord tone sits at the bottom. Root position has the root as the lowest note; 1st inversion moves the root to the top, and 2nd inversion shifts the next note up as well. The chord keeps the same notes — they are just stacked in a different order.
How do I find the notes in a chord like Am7 or Cmaj7?
Select the chord, or type its name in the search box, and the tool shows both the interval formula (R, 3, 5, b7, and so on) and the actual note names. For example, Am7 is A, C, E, G, and Cmaj7 is C, E, G, B.
Can I search using flat notation like Bb or Eb?
Yes. The search accepts both sharp and flat spellings. Typing Bb finds the A# chords and Eb finds the D# chords, since those notes are enharmonically the same.
Does the chord chart need an internet connection?
Only for the initial page load. After that, all chord data and the audio synthesis run locally in your browser, so the tool keeps working offline with no server requests.
No comments yet. Be the first to comment!