rangeChanged: Function

Sets the rangeChanged Event handler for StockChart which is triggered after the range of StockChart is changed / updated upon zooming / panning through slider or through charts or by selecting the range buttons or by changing the value in the inputfields of range selector.

When event is triggered, a parameter that contains event related data is passed to the assigned event handler. Parameter includes source, minimum and maximum value corresponding to the event.

Note
  • rangeChanged is triggered only when the range of the StockChart is changed manually using mouse/pointer (zooming/panning/sliding) and it doesn’t trigger when range of StockChart are set programmatically.
  • rangeChanged can be used to load the data asynchronously.
Default: null
Options: rangeChanged: function(e) { alert ( “Event Source: ” + e.source ) }
  1. var stockChart = new CanvasJS.StockChart("container",
  2. {
  3. .
  4. .
  5. rangeChanged: function(e) {
  6. console.log("Source: "+ e.source + ,
  7. "Minimum: "+ e.minimum,
  8. "Maximum: "+ e.maximum )
  9. },
  10. .
  11. .
  12. });
  13. stockChart.render();

Event Object

  1. e: {
  2. type, // event type - "rangeChanging" or "rangeChanged"
  3. source, // "chart", "buttons" , "inputFields", "navigator"
  4. index, // sets only if source is chart or buttons else null
  5. minimum,
  6. maximum,
  7. stockChart
  8. }

Try Editing The Code


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