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 Editing The Code

  Also See:    

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

30 Comments

  1. d_man says:

    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

    • Sunil Urs says:

      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.

    • Spweb says:

      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. d_man says:

    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.

    • Sunil Urs says:

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

  5. Fast_Heinz says:

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

    • Anjali says:

      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.

      • Anik Saha says:

        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

  7. Riv says:

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

      • gian says:

        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
        },

  9. rajendra says:

    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

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