How do I remove cartesian axes from chart js?

Question

I am trying to personalize a chart.js. But I can not find how to remove (or hide) the X and Y axes.
I am also interested in not showing data on hover and I would like not to show the reference on the top. I am just starting with chart.js and I only need to do a few graphs.
Thank you :)

This is the graph I currently have

        datasets: {
            label: "I need help plz",
            backgroundColor: gradient,
            fill: true,
            borderColor: "rgb(0, 50, 100)",
            borderWidth: 0.001,
            tension: 0.4,
            radius: 0,
            data: dataset,
        },

For removing the references on the top this post was useful Chart.js v2 hide dataset labels

LeeLenalee · Accepted Answer · 2021-06-25T23:41:29.840

As described in the documentation (https://www.chartjs.org/docs/master/axes/#common-options-to-all-axes) you can set in the options of the scale the display to true or false or 'auto' where auto hides the scale if no dataset is visable that is linked to that axis.

For not showing data on hover you can set the tooltip to enabled: false

Example (y auto display and no x axis):

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: 'red'
    }, ]
  },
  options: {
    plugins: {
      tooltip: {
        enabled: false
      }
    },
    scales: {
      y: {
        display: 'auto'
      },
      x: {
        display: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>

How do I remove cartesian axes from chart js?

1 Answers1