Search code examples
javascriptcanvasjs

How do I hide interval on canvasjs charts?


I have a canvasjs line chart with an X and Y axis. In canvasjs the interval on the Y axis is calculated automatically, unless I specify. How do I remove it? I do not want the interval lines showing.

Example:

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: "Simple Line Chart"
    },
    axisY:{
        interval: 10 < I want to hide this
    },
    data: [{        
            type: "line",       
            dataPoints: [
                { y: 450 },
                { y: 414 },
                { y: 510 }
            ]
        }]
    });
chart.render();

Solution

  • You can hide grids and ticks by setting gridThickness and tickLength to 0 respectively. If you like to hide axis labels along with removing grids and tick, you can use labelFormatter. Below is the working code, which hides grids, ticks and labels over axisY:

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: "Simple Line Chart"
        },
        axisY:{
          gridThickness: 0,
          tickLength: 0,
          labelFormatter: function(e) {
            return "";
          }
        },
        data: [{        
                type: "line",       
                dataPoints: [
                    { y: 450 },
                    { y: 414 },
                    { y: 510 }
                ]
            }]
        });
    chart.render();
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <div id="chartContainer" style="width: 100%; height: 200px"></div>