Search code examples
javascripthtmltypescriptjsfiddlecanvasjs

How to remove Y-Axis completely from CanavasJS chart


I am using a canvasJS chart and I would like to completely remove/hide Y-Axis. Here is a JSFiddle example in which I have been able to remove Y-Axis line and Title. I found the below properties to hide Title and remove line however I am not able to remove the Values on Y-Axis.

lineThickness: 0,
gridThickness: 0,
tickThickness: 0

However I would like to also remove the data i.e Numbers from 0 to 90.


Solution

  • You can achieve your requirements by setting labelFormatter. When you set labelFontSize to 0, labels will still occupy some space which is not the case with labelFormatter. The case is same when you use tickThickness - instead you can set tickLength to 0.

    Please find the updated code below:

    var chart = new CanvasJS.Chart("chartContainer", {
       backgroundColor: "transparent",
       axisX:{
      	lineThickness: 0,
      	tickLength: 0,
      	labelFormatter: function(e) {
      	    return "";
      	}
      },
      axisY:{
      	lineThickness: 0,
      	gridThickness: 0,
      	tickLength: 0,
      	labelFormatter: function(e) {
      	    return "";
      	}
      },
      data: [{
          type: "line",
          dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55 },
            { x: 30, y: 50 },
            { x: 40, y: 65 },
            { x: 50, y: 95 },
            { x: 60, y: 68 },
            { x: 70, y: 28 },
            { x: 80, y: 34 },
            { x: 90, y: 14 }
          ]
      }]
    });
    
    chart.render();
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <div id="chartContainer" style="height: 200px; width: 100%;"></div>