[Chartjs]-How do I remove cartesian axes from chart js?

by

1👍

✅

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>

Leave a comment