How to get getLimit() and setLimit() methods by using listeners in the scatter chart?

Question

How do we get the getLimit() and setLimit() methods by using listeners in the scatter chart. And can anyone explain dynamic change of limits in the components.

Here attached code for listeners,

listeners: {
                            itemmousemove: function (series, item, event,tip) {

                                console.log('itemmousemove', item.category, item.field);
                            }
                        }

How to change dynamically properties of limits in the scatter chart, Attached the code below.

limits: [{
                                value: 'metric two',
                                line: {
                                    strokeStyle: 'red',
                                    lineDash: [6, 3],
                                    title: {
                                        text: 'Qty',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                }
                            }]

Answer 1

Here is a example how you can manipulate limits in the chart, not realy sure what you wanted to do in the "itemmousemove" so i put it a itemdblclick sample instead :

Sample FIDDLE

Ext.application({
    name: 'Fiddle',
    layout: 'fit',

    launch: function () {

        var chart = Ext.create('Ext.chart.CartesianChart', {

            width: 600,
            height: 400,
            insetPadding: 40,
            interactions: ['itemhighlight'],
            plugins: {
                chartitemevents: {
                    moveEvents: true
                }
            },
            store: {
                fields: ['name', 'data1', 'data2'],
                data: [{
                    'name': 'metric one',
                    'data1': 10,
                    'data2': 14
                }, {
                    'name': 'metric two',
                    'data1': 7,
                    'data2': 16
                }, {
                    'name': 'metric three',
                    'data1': 5,
                    'data2': 14
                }, {
                    'name': 'metric four',
                    'data1': 2,

                    'data2': 6
                }, {
                    'name': 'metric five',
                    'data1': 27,
                    'data2': 36
                }]
            },
            axes: [{
                id: 'myAxis',
                type: 'numeric',
                position: 'left',
                fields: ['data1'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                grid: true,
                minimum: 0,
                limits: [{
                    value: 0.2,
                    line: {
                        strokeStyle: 'red',
                        lineDash: [6, 3],
                        title: {
                            text: 'Monthly minimum',
                            fontSize: 14
                        }
                    }
                }]
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['name'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                }
            }],
            series: {
                type: 'scatter',
                highlight: {
                    size: 12,
                    radius: 12,
                    fill: '#96D4C6',
                    stroke: '#30BDA7'
                },
                fill: true,
                xField: 'name',
                yField: 'data2',
                marker: {
                    type: 'circle',
                    fill: '#30BDA7',
                    radius: 10,
                    lineWidth: 0
                }

            },
            listeners: {
                itemdblclick: function (series, item, event, tip) {

                    var lim = chart.getAxis('myAxis').getLimits();
                    var new_lim = CreateNewLimit(0.9, 'yellow', 'Clicked Limit');
                    lim.push(new_lim);
                    RefreshChart(lim);

                }
            }
        });
        Ext.create('Ext.panel.Panel', {
            title: 'Scatter Chart',
            renderTo: document.body,
            tbar: [{
                xtype: 'button',
                text: 'Toggle Limit',
                handler: function () {

                    var lim = chart.getAxis('myAxis').getLimits();
                    var new_lim = CreateNewLimit(0.7, 'blue', 'Monthly Max');
                    if (lim.length == 1) {
                        lim.push(new_lim);
                    } else {
                        lim.splice(1, 1);
                    }
                    RefreshChart(lim);

                }
            }, {
                xtype: 'button',
                text: 'Add New ',
                handler: function () {

                    var lim = chart.getAxis('myAxis').getLimits();
                    var new_lim = CreateNewLimit(0.5, 'green', 'Monthly Average');
                    lim.push(new_lim);
                    RefreshChart(lim)
                }
            }],

            items: [
                chart
            ]
        });

        function RefreshChart(lim) {
            chart.getAxis('myAxis').setLimits(lim);
            chart.getStore().removeAll();
            chart.getStore().reload();

        }

        function CreateNewLimit(val, color, text) {
            return {
                value: val,
                line: {
                    strokeStyle: color,
                    lineDash: [6, 3],
                    title: {
                        text: text,
                        fontSize: 14
                    }
                }
            };
        }
    }
});