interval: Number

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


Default: Automatically Calculated
Example: 50, 75..

Notes
  • If interval is not set, it is automatically calculated.
  • Changing this property does not affect the axis scale.
  • This property is measured in the units specified by the intervalTypeproperty.


var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisX:{
   interval: 50,
 },
 .
 .
});
chart.render();


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 30

  1. Hi there,

    I’ve been experimenting with CanvasJS using dynamic data from MySQL and love it so far.

    My question however, when I set interval to 1, I only get a label for every OTHER item. I have an X axis with 30+ items and I can’t get the chart to label each and every one. Is there something I’m missing? I even tried 0 as an interval, but that did not work either.

    Thanks!
    d_man

    • Because you have 30+ items, I think labels are too crowded. Cases where labels might overlap, CanvasJS automatically skips alternate labels. In order to get all labels you can reduce the font size or set an angle to the labels.

    • I am using canvas with dynamic data. and love it so far.

      But i have a problem that the labels shows on the x axis are not static for example see the above graph on the page the labels are from 0 to 100 with the interval of 20 but if set maximum value of y to 60 then it will show labels up to 80 only. is there any way to show static values on x axis i.e. 0 ,20,40,60,80,100 in my case.

      please reply urgently

  2. Unfortunately it doesn’t matter what size I make the font, nor how high I make the chartContainer. Any chart over 10 items will not label each item no matter what I set the interval to. 10 items will work… 11 items will not.

    • Can you please re-create the issue in jsfiddle so that I can find out what the issue is.

  3. Am having the same issue as d_man; 11 labels appear fine, add any more and only every second label appears

    • Anik,

      100 is not being displayed because you don’t have any dataPoint at x = 100. So this is the right behaviour and we don’t see any problem.

      • sorry for my comment 🙂

        var chart = new CanvasJS.Chart(“chartContainer”,
        {
        title:{
        text: “Multi-Series Line Chart”
        },
        axisX:{
        gridColor: “lightblue” ,
        minimum:0,
        maximum:100,
        interval:10,
        gridThickness: 2
        },
        axisY:{
        gridColor: “lightgreen”,
        valueFormatString: “####”
        },
        legend: {
        horizontalAlign: “right”, // left, center ,right
        verticalAlign: “top”, // top, center, bottom
        },
        data: [
        {
        color:”darkgreen”,
        showInLegend: true,
        Size:18,
        type: “line”,
        markerType: “circle”,
        markerSize: 18,
        markerColor: “#4682B4”,
        dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25},
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: 24 },
        { x: 90, y: 26}

        ]
        }
        ]
        });

        chart.render();

        result: https://dl.dropboxusercontent.com/u/93134095/line.PNG
        in x axis 100 is not shown correctly

  4. Is there any way to have automatically calculated intervals appropriate for a time axis? I.e. I want intervals of 60 seconds, not 100.

      • setting the interval with a variable ..
        this is my code:

        var ti = ;

        var chart = new CanvasJS.Chart(“chartContainer”,
        {
        zoomEnabled: false,
        animationEnabled: true,
        animationDuration: 65000,
        height: $(“.bgv”).height(),
        width: $(“.bgv”).width(),
        backgroundColor: “transparent”,
        title:{
        text: “”
        },
        axisY:{
        gridColor: “transparent”,
        labelFontSize: 16,
        minimum: -100,
        maximum: 100,
        interval: 50,
        },
        axisX:{
        gridColor: “transparent”,
        labelFontSize: 8,
        minimum: 0,
        maximum:60,
        interval: ti
        },

  5. How do you specify major axis and minor axis.. i want vertical grid lines for minor axis and major axis
    for e.g, say major axis at interval of 10 and minor axis at interval of 1

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.