rangeChanging: Function

Sets the rangeChanging event handler for Chart which is triggered before 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
  • rangeChanging 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: rangeChanging: function(e){      alert( “Event Type : ” + e.type );   }, 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 . 
zoomEnabled: true,
.
rangeChanging: 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

7 Comments

  1. Deepak says:

    Hello,

    I am trying dynamic charts(from trial to enterprise app), must say very nice and usefule charts.
    Have a question though, about dynamic charts(https://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/); be default the direction of chart movement is from Right towards Left.
    Is there a property or way to reverse this(i.e. from Left –> Right), something like animationDirection?
    Looked for properties but could not find anythig.

    Would appreciate a working sample if possible.

    Thanks,
    Deepak

    • Vishwas R says:

      Deepak,

      Chart movement depends on the dataPoints being added. The dataPoints are being added towards the right of existing values, instead you can add dataPoints towards left and the movement of chart changes.

      • Deepak says:

        Vishwas, not very clear by what you mean.
        Can you a quick example about the same or some sample code?

        Thanks in advacne.

        • Vishwas R says:

          Deepak,

          By adding x-values higher than previous value, it looks like chart is moving from right to left. Similarly when you add x-value lesser than previous values, it looks likes it is moving from left to right.

          Here is an example.

          • Deepak says:

            Hello,

            The chart renders fine, but when I use it inside a with ng-repeat, the chart does not render, while outside this it works fine.
            Code is something like this:
            ————————————–

            // this one renders fine

            // this one does not

            {{user.Name}}

            ———————————————–
            Rest of the code is similar to one in your example.

            Any pointers would be helpful.
            Thanks

          • Deepak says:

            Not ableto paste my code in comment for some reason.
            But the requirement is to show multiple charts, inside a div which is using ng-repeat to loop and show some data.
            The cart display outside this div works fine, but when used inside div with ng-repeat, the chart does not render.

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