[BUG?] Perspective Power Chart Bug - Embr-Chart as a Replacement?

Ignition
36

:tada:

Yeah my first example didn't track the mouse very well.

Here's a version that should be exactly 1-to-1 by using some Chart.js scale helpers (getPixelForValue and getValueForPixel). You'll have to add the mouse cursor stuff back in (or have Claude do it for you :wink:)

(chart, event) => {
    if (event.event.type !== 'mousedown') return

    const { x: clickX, y: clickY } = event.event
    const scale = chart.scales.y

    if (clickX > scale.right || clickX < scale.left) return

    let isDragging = true
    const startMax = scale.max
    const startPixel = scale.getPixelForValue(startMax)

    const onMouseMove = (moveEvent) => {
        if (!isDragging) return

        const deltaPixels = clickY - moveEvent.clientY
        const deltaValue = scale.getValueForPixel(startPixel + deltaPixels) - scale.getValueForPixel(startPixel)

        chart.options.scales.y.max = startMax + deltaValue
        chart.update()
    }

    const onMouseUp = () => {
        isDragging = false
        document.removeEventListener('mousemove', onMouseMove)
        document.removeEventListener('mouseup', onMouseUp)
    }

    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
}

Question: does dragging only adjust the max of the Citech chart? Is there an alternative way of adjusting the minimum?

1 Like