JavaScript On Screen Menu

Example showcasing the use of On Screen Menu.

On-Screen Menu (OSM) is part of UI that can be used to simplify interaction with charts.
In this case the default buttons are used along with a custom button that shows/hides the intersection points of lines.

The On-Screen menu can be added this way:

const chart = lightningChart().ChartXY()

chart.addOnScreenMenu(
    [
        [
            // default buttnos
            OnScreenMenuButtonType.ZoomInX,
            OnScreenMenuButtonType.ZoomOutX,
            OnScreenMenuButtonType.ZoomInY,
            OnScreenMenuButtonType.ZoomOutY,
            OnScreenMenuButtonType.ZoomToFit,
            OnScreenMenuButtonType.ToggleAnimations,
        ],
    ],
    OnScreenMenuButtonShape.RoundedRectangle,
)

To add a custom button parameters must be defined.

const chart = lightningChart().ChartXY()

chart.addOnScreenMenu([
    [
        // cusrom button
        {
            icon: document.head.baseURI + 'examples/assets/9999/icon.png',
            dimensions: { rows: 1, columns: 1 },
            label: '',
            opacity: '0.8',
            color: 'blue',
            shape: OnScreenMenuButtonShape.RoundedRectangle,
            action: show,
        },
    ],
])

'addOnScreenMenu' takes an array of arrays as a parameter.
Each sub array adds a new line on the OSM menu.

const chart = lightningChart().ChartXY()

chart.addOnScreenMenu([
    [
        OnScreenMenuButtonType.ZoomInX,
        OnScreenMenuButtonType.ZoomOutX,
        OnScreenMenuButtonType.ZoomInY,
        OnScreenMenuButtonType.ZoomOutY,
        OnScreenMenuButtonType.ZoomIn,
        OnScreenMenuButtonType.ZoomOut,
    ],
    [OnScreenMenuButtonType.ZoomToFit, OnScreenMenuButtonType.ToggleAnimations],
    [
        {
            icon: document.head.baseURI + 'examples/assets/9999/icon.png',
            dimensions: { rows: 1, columns: 1 },
            opacity: '0.8',
            color: 'blue',
            shape: OnScreenMenuButtonShape.RoundedRectangle,
            action: show,
        },
    ],
])

Formula of lines intersection

function calculateIntersection(currPoint1, prevPoint1, currPoint2, prevPoint2) {
    // Expressions of numerator
    const exp1 = currPoint1.x * prevPoint1.y - currPoint1.y * prevPoint1.x // (x1 * y2 - y1 * x2)
    const exp2 = currPoint2.x * prevPoint2.y - currPoint2.y * prevPoint2.x // (x3 * y4 - y3 * x4)

    const exp3 = currPoint2.x - prevPoint2.x // (x3 - x4)
    const exp4 = currPoint1.x - prevPoint1.x // (x1 - x2)
    const exp5 = currPoint2.y - prevPoint2.y // (y3 - y4)
    const exp6 = currPoint1.y - prevPoint1.y // (y1 - y2)

    // Denominator
    const d1 = (currPoint1.x - prevPoint1.x) * (currPoint2.y - prevPoint2.y) // (x1 - x2) * (y3 - y4)
    const d2 = (currPoint1.y - prevPoint1.y) * (currPoint2.x - prevPoint2.x) // (y1 - y2) * (x3 - x4)
    const d = d1 - d2

    if (d === 0) {
        throw new Error('Number of intersection points is zero or infinity.')
    }

    const px = (exp1 * exp3 - exp4 * exp2) / d
    const py = (exp1 * exp5 - exp6 * exp2) / d

    const p = { x: px, y: py }

    // Return point
    return p
}