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.

``````const chart = lightningChart().ChartXY()

[
[
// default buttnos
],
],
)``````

To add a custom button parameters must be defined.

``````const chart = lightningChart().ChartXY()

[
[
// cusrom button
{
dimensions: { rows: 1, columns: 1 },
label: '',
opacity: '0.8',
color: 'blue',
action: show,
},
],
],
)``````

``````const chart = lightningChart().ChartXY()

[
[
],
[
],
[
{
dimensions: { rows: 1, columns: 1 },
opacity: '0.8',
color: 'blue',
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
}``````