score:3

Accepted answer

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
            }]
        }
    }

score:0

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>

score: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...


Related Query

More Query from same tag