rangeChanged: Function

Sets the rangeChanged event handler for Chart which is triggered after viewportMinimum or viewportMaximum are updated while zooming, panning, or reset. Upon event, a parameter that contains event related data is sent to the assigned event handler. Parameter includes trigger, type and axes viewportMinimum and viewportMaximum corresponding to the event.

Notes
  • rangeChanged is triggered only when range is changed manually using mouse/pointer (zoom/pan) and it does not fire when viewportMinimum and viewportMaximum are set programmatically.
  • This event along with viewportMinimum and viewportMaximum can be used to sync multiple chart ranges.
Default: null
Example: rangeChanged: function(e){      alert( “Event Type : ” + e.type );   }, 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 . 
zoomEnabled: true,
.
rangeChanged: function(e){
			console.log("type : " + e.type + ", trigger : " + e.trigger + ", 
                        AxisX viewportMininum : " + e.axisX[0].viewportMinimum + ",
                        AxisX viewportMaximum : " + e.axisX[0].viewportMaximum);
                },
 .
 .
 . 
});

chart.render();

Event Object 

e:{ 
    type, // event type - "rangeChaning" or "rangeChanged"
    trigger, // "zoom", "pan", "reset"
    chart,
    axisX:[{ // retuned only if axisX is present
        viewportMinimum, //null for zoomType: "y"
        viewportMaximum
        },
    .
    .
    ],
    axisY:[{ // retuned only if axisY is present
        viewportMinimum,  //null for zoomType: "x"
        viewportMaximum
        },
    .
    .
    ],

    axisX2:[{ // retuned only if axisX2 is present
        viewportMinimum, //null for zoomType: "y"
        viewportMaximum
	},
    .
    .
    ],
    axisY2:[{ // retuned only if axisY2 is present
        viewportMinimum,  //null for zoomType: "x"
        viewportMaximum
	},
    .
    .
    ]
}
Note
  • axisX, axisY, axisX2 & axisY2 used to be simple objects (not array) prior to v1.9.5 beta. This change is due to the implementation of Multiple X / Y Axis.
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question