viewportMinimum: Number/Date/Timestamp

Viewport is the visible range of the axis and viewportMinimum allows you to set its minimum value. This can be used in combination with viewportMaximum in order to zoom into a certain region programmatically.

Default: Automatically Calculated based on the data
Example: -100, 350..
Notes
  • viewportMinimum and viewportMaximum are useful in setting the initial zoom in a chart.
  • If viewportMinimum and viewportMaximum are not set, minimum and maximum values of axis will become the viewport’s range.
  • Setting viewportMinimum or viewportMaximum will make the zoom/pan toolBar visible. Clicking the reset button will set the viewport range to viewportMinimum and viewportMaximum.
  • Setting viewportMinimum and viewportMaximum of all axis to null will hide the toolBar – equivalent to clicking reset button. 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisX:{
   viewportMinimum: -50,
   viewportMaximum: 50
 },
 .
 . 
});
chart.render();
Try Editing The Code

  Also See:    

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

6 Comments

  1. Pingback: In v1.8 you can Sync multiple chart ranges, zoom vertically and control Pie/Doughnut Chart size - CanvasJS

  2. Pat says:

    Is it possible to update viewportMinimum and viewportMaximum during runtime? I am using line chart to display streaming data. I want to fix range of X that is viewed by default, for example [0-300] and then [1-301] and so on

    • Sanjoy says:

      Yeah, you can update viewportMinimum and viewportMaximum anytime after chart is initialized. For showing it’s effect on chart you need to call render() method on it.
      Here is an example

  3. Pat says:

    How can I use viewportMinimum, viewportMaximum and interval when data on axis X is in valueFormatString: “MMM DD YYYY hh:mm” ? My data is coming every 30 minute, but I want axis X tick to display every day, not every 30 minutes

  4. Pat says:

    How can I use axis X viewportMinimum, viewportMaximum and interval when the format is valueFormatString: “MMM DD YYYY hh:mm” ? My data comes every 30 mins, but I wants axis X tick every day, not 30 mins.

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