Hmm, I think i've got what you've got in your props, but I don't seem to be able to click and drag the axis. anything else I need to do?
I've literally just dragged on a line chart.js component and added the events and plugins that you have (I added only the rectangled event first before adding the rest)
Chart Component JSON
[
{
"type": "embr.chart.chart-js",
"version": 0,
"props": {
"data": {
"datasets": [
{
"data": [
{
"x": 0,
"y": 20.790464349448122
},
{
"x": 1,
"y": 27.541905413990484
},
{
"x": 2,
"y": 9.044548907913263
},
{
"x": 3,
"y": 63.58544584440057
},
{
"x": 4,
"y": 40.57122042169531
},
{
"x": 5,
"y": 46.17945691520222
},
{
"x": 6,
"y": 5.272367698783542
},
{
"x": 7,
"y": 78.62029735550435
},
{
"x": 8,
"y": 1.384758302338518
},
{
"x": 9,
"y": 8.094105544748587
},
{
"x": 10,
"y": 93.29711393437752
},
{
"x": 11,
"y": 78.54999817500953
},
{
"x": 12,
"y": 30.022085778849018
},
{
"x": 13,
"y": 68.38927062938775
},
{
"x": 14,
"y": 93.84973459203651
},
{
"x": 15,
"y": 85.15266831524416
},
{
"x": 16,
"y": 3.3272574045278946
},
{
"x": 17,
"y": 3.4738230710669837
},
{
"x": 18,
"y": 76.78237778113568
},
{
"x": 19,
"y": 76.13468451530511
},
{
"x": 20,
"y": 88.63284915490885
},
{
"x": 21,
"y": 92.74877419440537
},
{
"x": 22,
"y": 94.12886888152015
},
{
"x": 23,
"y": 97.06398992204936
},
{
"x": 24,
"y": 46.71625167184086
},
{
"x": 25,
"y": 13.224799335767212
},
{
"x": 26,
"y": 35.052260048430696
},
{
"x": 27,
"y": 29.46821488097423
},
{
"x": 28,
"y": 90.27395392440542
},
{
"x": 29,
"y": 7.832816289114186
},
{
"x": 30,
"y": 15.799390058813623
},
{
"x": 31,
"y": 80.66585380750348
},
{
"x": 32,
"y": 4.629220116475031
},
{
"x": 33,
"y": 24.00958904699422
},
{
"x": 34,
"y": 8.133906226255029
},
{
"x": 35,
"y": 81.93116748921958
},
{
"x": 36,
"y": 82.82333811028309
},
{
"x": 37,
"y": 95.37635776015469
},
{
"x": 38,
"y": 74.00252644137744
},
{
"x": 39,
"y": 27.90694570663671
},
{
"x": 40,
"y": 30.569029278167793
},
{
"x": 41,
"y": 11.104072480586257
},
{
"x": 42,
"y": 68.15581447149303
},
{
"x": 43,
"y": 27.051454957054943
},
{
"x": 44,
"y": 48.477001171626725
},
{
"x": 45,
"y": 73.62917163080661
},
{
"x": 46,
"y": 7.528701180738118
},
{
"x": 47,
"y": 21.794180888547032
},
{
"x": 48,
"y": 17.0019331614802
},
{
"x": 49,
"y": 80.4420964468141
}
],
"label": "Dataset 1"
},
{
"data": [
{
"x": 25,
"y": 99.00283352088223
},
{
"x": 26,
"y": 36.743648170189644
},
{
"x": 27,
"y": 33.58269158236888
},
{
"x": 28,
"y": 70.52608530981715
},
{
"x": 29,
"y": 78.48664561425423
},
{
"x": 30,
"y": 99.80258881269653
},
{
"x": 31,
"y": 23.56577175483505
},
{
"x": 32,
"y": 27.6260054014127
},
{
"x": 33,
"y": 11.84780583914382
},
{
"x": 34,
"y": 78.95435294680595
},
{
"x": 35,
"y": 89.0983947949238
},
{
"x": 36,
"y": 87.63589420154018
},
{
"x": 37,
"y": 82.4714423791225
},
{
"x": 38,
"y": 46.29407127415893
},
{
"x": 39,
"y": 12.463880984334686
},
{
"x": 40,
"y": 91.82293604614682
},
{
"x": 41,
"y": 9.645637547490315
},
{
"x": 42,
"y": 23.87358763050218
},
{
"x": 43,
"y": 64.35308758482624
},
{
"x": 44,
"y": 61.30614039090162
},
{
"x": 45,
"y": 60.123113026673906
},
{
"x": 46,
"y": 11.262924017594045
},
{
"x": 47,
"y": 36.72684549715057
},
{
"x": 48,
"y": 19.144808134626057
},
{
"x": 49,
"y": 11.499648689135334
},
{
"x": 50,
"y": 48.862954644422615
},
{
"x": 51,
"y": 44.0188922198424
},
{
"x": 52,
"y": 1.4731641405698048
},
{
"x": 53,
"y": 76.62654204425371
},
{
"x": 54,
"y": 97.09498548555429
},
{
"x": 55,
"y": 68.88623969428103
},
{
"x": 56,
"y": 9.347347267187478
},
{
"x": 57,
"y": 27.59945299037486
},
{
"x": 58,
"y": 38.62680310622668
},
{
"x": 59,
"y": 64.48467246665813
},
{
"x": 60,
"y": 99.50148874944306
},
{
"x": 61,
"y": 59.35003045509352
},
{
"x": 62,
"y": 7.407803152895475
},
{
"x": 63,
"y": 62.077958133975066
},
{
"x": 64,
"y": 19.550924069869623
},
{
"x": 65,
"y": 59.290461562229346
},
{
"x": 66,
"y": 15.46272365498117
},
{
"x": 67,
"y": 27.411246578970218
},
{
"x": 68,
"y": 59.515203740704415
},
{
"x": 69,
"y": 76.39871363134311
},
{
"x": 70,
"y": 20.255435491968
},
{
"x": 71,
"y": 57.26165130029921
},
{
"x": 72,
"y": 73.41996375745644
},
{
"x": 73,
"y": 68.57751118650746
},
{
"x": 74,
"y": 25.40840081665815
}
],
"label": "Dataset 2"
}
]
},
"options": {
"plugins": {
"zoom": {
"pan": {
"modifierKey": null
}
}
},
"scales": {
"x": {
"type": "linear"
},
"y": {
"type": "linear"
}
}
},
"events": [
"mousemove",
"mouseout",
"click",
"touchstart",
"touchmove",
"mousedown"
],
"plugins": [
{
"afterEvent": "(chart, event) => {\n if (event.event.type !== 'mousedown') return\n\n const { x: clickX, y: clickY } = event.event\n const { y: scale } = chart.scales\n\n const onScale = clickX < scale.right && clickY > scale.left\n console.log(onScale)\n if (!onScale) return\n\n let isDragging = true\n const { min: startMin, max: startMax, height: scaleHeight } = scale\n\n const onMouseMove = (moveEvent) => {\n if (!isDragging) return\n\n console.log('onMouseMove')\n const deltaY = moveEvent.clientY - clickY\n const percentChange = (deltaY / scaleHeight) * (startMax - startMin)\n const delta = (percentChange * (startMax - startMin)) / 100\n\n chart.options.scales.y.min = startMin\n chart.options.scales.y.max = startMax + delta\n chart.update()\n }\n\n const onMouseUp = () => {\n console.log('onMouseUp')\n isDragging = false\n document.removeEventListener('mousemove', onMouseMove)\n document.removeEventListener('mouseup', onMouseUp)\n }\n\n document.addEventListener('mousemove', onMouseMove)\n document.addEventListener('mouseup', onMouseUp)\n\n console.log(chart, event)\n}",
"events": [
"mousedown"
],
"id": "draggableScales"
}
]
},
"meta": {
"name": "Chartjs"
},
"position": {
"grow": 1,
"basis": "300px"
},
"custom": {}
}
]
Edit: the event type is always a mousemove, I haven't seen any mousedown event types