# fretboard-diagram

> A simple tool for creating fretboard diagrams.

Latest version **1.0.0** (published 2021-03-30) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install fretboard-diagram
pnpm add fretboard-diagram
yarn add fretboard-diagram
bun add fretboard-diagram
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-03-30 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 120.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kyle Patterson |
| Maintainers | zazzerino |

## Links

- npm: https://www.npmjs.com/package/fretboard-diagram
- npm.io page: https://npm.io/package/fretboard-diagram

## Recent versions

- 1.0.0 (latest) — 2021-03-30
- 0.1.1 — 2020-07-14
- 0.1.0 — 2020-07-09
- 0.0.9 — 2019-08-29
- 0.0.8 — 2019-08-18
- 0.0.7 — 2019-08-18
- 0.0.6 — 2019-08-03
- 0.0.5 — 2019-08-03
- 0.0.4 — 2019-08-03
- 0.0.3 — 2019-08-03
- 0.0.2 — 2019-02-19
- 0.0.1 — 2019-02-19

## README

# Fretboard Diagram

A simple tool for creating fretboard diagrams.

## Install

    npm install --save fretboard-diagram

## Usage

    import { FretboardDiagram } from 'fretboard-diagram'

    const AmChord = [
      { string: 5, fret: 3 },
      { string: 3, fret: 2, color: "limegreen" },
      { string: 1, fret: 0, color: "salmon" }
    ];

    const div = document.createElement('div');
    div.setAttribute("id", "diagram-id");
    document.body.appendChild(div);

    const diagram = new FretboardDiagram({
      id: "diagram-id",
      dots: AmChord,
      label: "A min",
      showFretNums: true,
      showStringNames: true,
      onClick: (dot, fd) => {
        console.log(`you clicked string: ${dot.string}, fret: ${dot.fret}`);
      }
    });

---
_Source: https://npm.io/package/fretboard-diagram · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._