Chart.js: How to remove axes (x and y)

[Arman-Amirahmadi]

as you can see , i use Chart.js inside of Clappr video player ....
I want to remove axes (x and y)
How can i do it ?

[alex2wong]

Hi , pls refer to http://www.chartjs.org/docs/latest/axes/labelling.html#scale-title-configuration
return empty string in ticks callback would work, if return null, grid line is hidden also.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    // return empty string would work, if return null, grid line is hidden also.
                    callback: function(value, index, values) {
                        return '';
                    }
                }
            }]
        }
    }
});

[Arman-Amirahmadi]

@alex2wong
Thank you Alex , i added the code to script , but it did NOT work :cry:

[Hedva]

See Axes Styling in the docs

options: {
  scales: {
    xAxes: [{
      display: false //disable grid lines for this axis.
      gridLines: {
        drawOnChartArea: false, //disable lines on the chart area inside the axis lines
        drawBorder: false, //disable border at the edge between the axis and the chart area
        drawTicks: false, //disable lines beside the ticks in the axis area beside the chart.
        zeroLineWidth: 0 //zero width of the grid line for the first index (index 0).
      },
      ticks: {
        display: false //disable tick marks for this axis
      }
    }]
  }
}

[Arman-Amirahmadi]

@Hedva :sob: why did not work ?

[alex2wong]

pls put the options like new Chart('el', data, options);
options belongs to Chart, not belong to dataset object, which means all datasets share one chart option.

[Arman-Amirahmadi]

@alex2wong
i did it , would you please give me full code

my Code

 window.onload = function () {
      var data = {
        labels: [1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 1, 10, 20, 30, 40, 1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 1, 10, 20, 30, 40, 50, 60, 70, 80, 90],
        datasets:
          [
            {
              Color: "transparent",
              fillColor: "transparent", // rgba(220,220,220,0.5)
              strokeColor: "rgba(220,220,220,.8)",// transparent
              pointColor: "transparent",// transparent
              pointStrokeColor: "transparent",// transparent
              pointHighlightFill: "#fff",// transparent
              pointHighlightStroke: "rgba(220,220,220,.4)",// transparent
              data: [24, 3, 5, 36, 11, 24, 3, 5, 36, 11, 13, 17, 19, 23, 29, 24, 55, 17, 60, 23, 29, 13, 5, 36, 11, 13, 17, 19, 23, 29, 24, 3, 5, 36, 11, 13, 17, 19, 23, 29, 13, 17, 19, 23, 29]

            }
          ] 

      };



   var ctx = document.getElementById("lineChart").getContext("2d");
      var options = {};
      var lineChart = new Chart(ctx).Line(data, options);

[alex2wong]

https://jsfiddle.net/alex2wong/3a1db09w/4/

[benmccann]

Closing as fixed. Thank you so much @Hedva for providing the advice!