[Chartjs]-ChartJS – remove axis?

by

3👍

✅

Not sure which version of chartjs you are using but if someone comes across this you can turn off the display of 1 or more Axis by using display: false for example the following turns off the display of the x axis.

  options: {
        scales: {
            xAxes: [{
                display: false
            }]
        }
    }

2👍

Here’s a rough solution:

I found this around line 1600 of Chart.js:

// This is X axis, so draw it
                if (index === 0 && !drawHorizontalLine){
                    drawHorizontalLine = true;
                }

I modified it to always be false when index === 0, which I assume means that we’re on an axis:

// This is X axis, so <don't> draw it
                if (index === 0 && drawHorizontalLine){
                    drawHorizontalLine = false;
                }

I did something very similar for the Y-axis further down, and then I commented out the code that draws the tiny 5-pixel dashes along each axis as well. If someone knows of a configuration option for this, please share.

Also, I guess I could have just set the line stroke / fill color to the same as the background color…

1👍

Answer of @Rich Dominelli is correct for chart.js v2.xx

Here code for chart.js v3.xx to eliminate axis:

(not backwards compatible with v2.xx)

For those interested, following modified code to work with chart.js v3.xx

option: {
  scales: {
    x: {  // <-- object '{' now, instead of array '[{' before
      display: false
    },
    y: {  // <-- object '{' now, instead of array '[{' before
      display: false
    }
  }
};

Following full code example for line-chart without axes in snippet below that you can run:

const labels=["2021-08-02","2021-08-03","2021-08-04","2021-08-05","2021-08-06"];
const data_1=[39,41,42,43,43];
const data_2=[37,38,40,41,39];

const ctx=document.querySelector('canvas').getContext('2d');

const data = {
  labels: labels,
  datasets: [{
    label: 'Data 1',
    borderColor: 'grey',
    data: data_1
  }, {
    label: 'Data 2',
    borderColor: 'grey',
    data: data_2
  }]
};

const option = {
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }
  }
};

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: option
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

<canvas width="640" height="480"></canvas>

Leave a comment