javascript - ChartJS - remove axis? - Stack Overflow

admin管理员组

文章数量:1432449

Using ChartJS, Can I disable both the horizontal and vertical axes? I can use these options, but they specifically don't affect the axes:

//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,

//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,

.js

Using ChartJS, Can I disable both the horizontal and vertical axes? I can use these options, but they specifically don't affect the axes:

//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,

//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,

https://github./nnnick/Chart.js

• javascript
• chart.js

Share Improve this question Follow asked Mar 2, 2015 at 15:16 GazziniGazzini 73888 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Not sure which version of chartjs you are using but if someone es 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
            }]
        }
    }

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 mented 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...

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

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

(not backwards patible 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/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

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

本文标签： javascriptChartJSremove axisStack Overflow