Class SVGuitarChord

Hierarchy

SVGuitarChord

Constructors

constructor

new SVGuitarChord(container?: string | HTMLElement): SVGuitarChord
Parameters
- Optional container: string | HTMLElement
  
  The element into which the chord diagram is rendered. This can either be a CSS selector or a DOM element. If omitted, the diagram is rendered detached from the DOM and can be exported as a string with toSvg. This is useful for generating SVG files in a Node.js script without a browser. Note that the detached mode is only supported for the default (normal) chord diagram style.
Returns SVGuitarChord
- Defined in svguitar.ts:567

Properties

`Private` chordInternal

chordInternal: Chord = ...

`Private` `Optional` container

container?: string | HTMLElement

`Private` `Optional` rendererInternal

rendererInternal?: Renderer

`Private` settings

settings: ChordSettings = {}

`Static` plugins

plugins: SVGuitarPlugin[] = []

Accessors

`Private` orientation

get orientation(): Orientation
Returns Orientation
- Defined in svguitar.ts:1696

`Private` renderer

get renderer(): Renderer
Returns Renderer
- Defined in svguitar.ts:576

Methods

`Private` arcBarHeight

arcBarHeight(): number
Returns number
- Defined in svguitar.ts:942

chord

chord(chord: Chord): SVGuitarChord
Parameters
- chord: Chord
Returns SVGuitarChord
- Defined in svguitar.ts:610

clear

clear(): void
Returns void
- Defined in svguitar.ts:1572

configure

configure(settings: ChordSettings): SVGuitarChord
Parameters
- settings: ChordSettings
Returns SVGuitarChord
- Defined in svguitar.ts:595

`Private` coordinates

coordinates(x: number, y: number): {
x: number;
y: number;
}
rotates coordinates if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
Returns {
x: number;
y: number;
}
- x: number
- y: number
- Defined in svguitar.ts:1635

draw

draw(): {
height: number;
width: number;
}
Returns {
height: number;
width: number;
}
- height: number
- width: number
- Defined in svguitar.ts:616

`Private` drawBackground

drawBackground(): void
Returns void
- Defined in svguitar.ts:877

`Private` drawEmptyStringIndicators

drawEmptyStringIndicators(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:970

`Private` drawFinger

drawFinger(x: number, y: number, size: number, color: string, textSize: number, fontFamily: string, fingerOptions: FingerOptions, classNames: string[]): void
Parameters
- x: number
- y: number
- size: number
- color: string
- textSize: number
- fontFamily: string
- fingerOptions: FingerOptions
- classNames: string[]
Returns void
- Defined in svguitar.ts:1394

`Private` drawFretMarker

drawFretMarker(x: number, y: number, size: number, color: string, fretMarketOptions: FretMarker, classNames: string[]): void
Parameters
- x: number
- y: number
- size: number
- color: string
- fretMarketOptions: FretMarker
- classNames: string[]
Returns void
- Defined in svguitar.ts:1355

`Private` drawGrid

drawGrid(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:1095

`Private` drawPosition

drawPosition(y: number): void
Parameters
- y: number
Returns void
- Defined in svguitar.ts:770

`Private` drawShape

drawShape(shape: Shape, x: number, y: number, size: number, strokeWidth: number, strokeColor: string, fillColor: string, classNames: string[]): void
Parameters
- shape: Shape
- x: number
- y: number
- size: number
- strokeWidth: number
- strokeColor: string
- fillColor: string
- classNames: string[]
Returns void
- Defined in svguitar.ts:1454

`Private` drawTitle

drawTitle(size: number): number
Parameters
- size: number
Returns number
- Defined in svguitar.ts:1486

`Private` drawTopEdges

drawTopEdges(y: number): void
Hack to prevent the empty space of the svg from being cut off without having to define a fixed width
Parameters
- y: number
Returns void
- Defined in svguitar.ts:868

`Private` drawTopFret

drawTopFret(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:893

`Private` drawTunings

drawTunings(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:684

`Private` drawWatermark

drawWatermark(y: number): number
Parameters
- y: number
Returns number
- Defined in svguitar.ts:727

`Private` fingerSize

fingerSize(): number
Returns number
- Defined in svguitar.ts:937

`Private` fretLinesYPos

fretLinesYPos(startY: number): number[]
Parameters
- startY: number
Returns number[]
- Defined in svguitar.ts:957

`Private` fretSpacing

fretSpacing(): number
Returns number
- Defined in svguitar.ts:950

`Private` height

height(height_: number, width: number): number
rotates height if orientation is horizontal

Returns
Parameters
- height_: number
  
  height in vertical orientation
- width: number
  
  width in vertical orientation
Returns number
- Defined in svguitar.ts:1681

`Private` numFrets

numFrets(): number
Returns number
- Defined in svguitar.ts:923

`Private` numStrings

numStrings(): number
Returns number
- Defined in svguitar.ts:919

`Private` rectCoordinates

rectCoordinates(x: number, y: number, width: number, height: number): {
    height: number;
    width: number;
    x: number;
    y: number;
}
rotates coordinates of a rectangle if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
- width: number
  
  width in vertical orientation
- height: number
  
  height in vertical orientation
Returns {
    height: number;
    width: number;
    x: number;
    y: number;
}
- height: number
- width: number
- x: number
- y: number
- Defined in svguitar.ts:1651

remove

remove(): void
Completely remove the diagram from the DOM

Returns void
- Defined in svguitar.ts:1579

`Private` stringSpacing

stringSpacing(): number
Returns number
- Defined in svguitar.ts:927

`Private` stringXPos

stringXPos(): number[]
Returns number[]
- Defined in svguitar.ts:910

`Private` strokeWidth

strokeWidth(): number
Returns number
- Defined in svguitar.ts:946

`Private` toArrayIndex

toArrayIndex(stringIndex: number): number
Parameters
- stringIndex: number
Returns number
- Defined in svguitar.ts:964

toSvg

toSvg(): string
Export the current chord diagram as an SVG string. Call this after draw.

The returned string is a standalone <svg> document (including the xmlns attribute), so it can be written directly to a .svg file. This works both in the browser and in a headless environment (see the constructor documentation).

Returns string
- Defined in svguitar.ts:1568

`Private` topFretSize

topFretSize(): number
Returns number
- Defined in svguitar.ts:883

`Private` width

width(width_: number, height: number): number
rotates width if orientation is horizontal

Returns
Parameters
- width_: number
  
  width in vertical orientation
- height: number
  
  height in vertical orientation
Returns number
- Defined in svguitar.ts:1692

`Private` x

x(x: number, y: number): number
rotates x value if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
Returns number
- Defined in svguitar.ts:1613

`Private` y

y(x: number, y: number): number
rotates y value if orientation is horizontal

Returns
Parameters
- x: number
  
  x in vertical orientation
- y: number
  
  y in vertical orientation
Returns number
- Defined in svguitar.ts:1624

`Static` `Private` getFingerOptions

getFingerOptions(textOrOptions: undefined | string | FingerOptions): FingerOptions
Helper method to get an options object from the 3rd array value for a finger, that can either be undefined, a string or and options object. This method will return an options object in any case, so it's easier to work with this third value.
Parameters
- textOrOptions: undefined | string | FingerOptions
Returns FingerOptions
- Defined in svguitar.ts:1590

`Static` plugin

plugin<S, T>(this: S, plugin: T): {
    plugins: any[];
    prototype: __type<any, any>;
    new (...args: any[]): __type<S, T>;
} & S & Constructor<ReturnTypeOf<T>>
Type Parameters
- S extends Constructor<any> & {
  plugins: any[];
  }
- T extends SVGuitarPlugin | SVGuitarPlugin[]
Parameters
- this: S
- plugin: T
Returns {
    plugins: any[];
    prototype: __type<any, any>;
    new (...args: any[]): __type<S, T>;
} & S & Constructor<ReturnTypeOf<T>>
- Defined in svguitar.ts:540

`Static` sanityCheckSettings

sanityCheckSettings(settings: Partial<ChordSettings>): void
Parameters
- settings: Partial<ChordSettings>
Returns void
- Defined in svguitar.ts:650

Class SVGuitarChord

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Optional container: string | HTMLElement

Returns SVGuitarChord

Properties

Private chordInternal

Private Optional container

Private Optional rendererInternal

Private settings

Static plugins

Accessors

Private orientation

Returns Orientation

Private renderer

Returns Renderer

Methods

Private arcBarHeight

Returns number

chord

Parameters

chord: Chord

Returns SVGuitarChord

clear

Returns void

configure

Parameters

settings: ChordSettings

Returns SVGuitarChord

Private coordinates

Returns

Parameters

x: number

y: number

Returns { x: number; y: number; }

x: number

y: number

draw

Returns { height: number; width: number; }

height: number

width: number

Private drawBackground

Returns void

Private drawEmptyStringIndicators

Parameters

y: number

Returns number

Private drawFinger

Parameters

x: number

y: number

size: number

color: string

textSize: number

fontFamily: string

fingerOptions: FingerOptions

classNames: string[]

Returns void

Private drawFretMarker

Parameters

x: number

y: number

size: number

color: string

fretMarketOptions: FretMarker

classNames: string[]

Returns void

Private drawGrid

Parameters

y: number

Returns number

Private drawPosition

Parameters

`Optional` container: string | HTMLElement

`Private` chordInternal

`Private` `Optional` container

`Private` `Optional` rendererInternal

`Private` settings

`Static` plugins

`Private` orientation

`Private` renderer

`Private` arcBarHeight

`Private` coordinates

Returns {
x: number;
y: number;
}

Returns {
height: number;
width: number;
}

`Private` drawBackground

`Private` drawEmptyStringIndicators

`Private` drawFinger

`Private` drawFretMarker

`Private` drawGrid

`Private` drawPosition

`Private` drawShape

`Private` drawTitle

`Private` drawTopEdges

`Private` drawTopFret

`Private` drawTunings

`Private` drawWatermark

`Private` fingerSize

`Private` fretLinesYPos

`Private` fretSpacing

`Private` height

`Private` numFrets

`Private` numStrings

`Private` rectCoordinates

Returns {
height: number;
width: number;
x: number;
y: number;
}

`Private` stringSpacing

`Private` stringXPos

`Private` strokeWidth