interval: Number

Sets the distance between Tick Marks, Grid Lines and Interlaced Colors.

Default: Automatically Calculated
Example: 50, 75..

  • If interval is not set, it is automatically calculated.
  • Changing this property does not affect the axis scale.

var  chart =  new  CanvasJS.Chart("container",
   interval: 50,

Try it Yourself by Editing the Code below.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 20

  1. Hi. thanx for your plugin.
    I have small data, like 4.82, 3.67 etc, and i don’t see they on the graph, even when i set interval : 1 .
    But if i make all data *100, or *10, i see they, but all my graph between 300 and 500, and area from 0 to 300 by Y, is not useble, how hide it? and how show small data , like 4.82 etc
    thanks for attention.

  2. Hi
    How can i set custom intervals, for example, the graphs intervals are 10,20,30,40,50, but i want another with a custom value,


  3. Is there a way to have to interval forced to a whole number? For small value graphs, sometimes .5 doesn’t make any sense.

    • There is no way to force automatically calculated interval value to be an integer. But you can work around this by setting interval property to any required integer yourself.

      • Yes, I’m using that now. I have a script that generates many tables on the same page, but the values displayed range from small to very large. The “auto” option works well except at the extreme ends of the scale. Thanks for the info, and thanks for a great package of scripts!

  4. I need to scale Y2 axis in proportion to y1 axis. (For example if the interval is 20 in y axis, y2 should have interval 4 times of y1 i.e 80) and Axis Y1 is having autoscale. Is there any way i can implement it?

  5. Y axis doesn’t show the labels on the Y axis when it set maximum and minimum to float numbers as 1.1 , 0.8 ….
    It exists any configuration to show them?

    • Alberto,
      We have tried setting maximum and minimum values to 1.1,0.8… and it is working fine. Here is the JSfiddle.
      In case, you forgot to set the interval value accordingly, it should be set to a value less than the difference of the maximum and minimum values.
      You can also skip setting the interval, as it gets automatically calculated if no interval is provided.

      • Hi Rishabh!
        Thanks for your answer. I can show you here my result. It doesn’t show the labels on axis Y properly, and I don’t know why.
        Also, I have detected that the property “zoomType” is only applied when it is declared when the chart object is created. In this example, as you can see, it is set but the chart works with the default zoomType: “x”.


  6. hello

    i have issue with growth balance chart when the started amount is very big like 1 million and the change is small like 100 or 500 then the graph line is not going up how i can solve it please help

  7. Hi, we have an issue where we want to define how many ticks are going to appear on the axis, we don’t want to define the interval, we don’t really mind if they are 1k separators, 2k, 5k, we want to say, just give us 7 or so ticks, and we will be fine.

    We can’t calculate the ticks interval because, the user inputs values and we create graphs. We have no idea what the values will be.

  8. Hello I have doubt regarding interval.
    When i put interval =1 and only one value comes on x axis .Why do we get -1 then actual value then 1 on x axis?

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.