Remove grid lines and numbers on Chart.js

Question

I am trying to remove the grid lines on the Radar chart on chart.js v2 for react.

Desired Result but keeping the outermost line while removing the inner lines and numbers

I have attempted to use the following code but it only returns a runtime error saying "category" is not a registered scale.

const options = {
  scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      grid: {
        display: false
      }
    }
  }
}

This may not directly answer your question, but that specific error can be addressed with: import {CategoryScale} from 'chart.js'; Chart.register(CategoryScale); — phatfingers
– phatfingers, Commented Jul 9, 2022 at 2:42

uminder · Accepted Answer · 2022-07-09 15:04:49Z

1

This can be done through the following options.

scale: {
  ticks: {
    stepSize: 1,
    callback: (v, i, values) => i + 1 < values.length ? '' : v
  },
  gridLines: {
    color: [0, 0, 0, 0, '#ccc']
  }
}

For further details, please consult the Styling page from the Chart.js v2.9.4 documentation.

Please take a look at below runnable code and see how it works. Note that it uses a generic approach for defining gridLines.color.

const labels = ['Things 1', 'Things 2', 'Things 3', 'Things 4', 'Things 5'];
const data = [0, 3, 5, 2, 5];
const max = Math.ceil(Math.max(...data));

new Chart('radar-chart', {
  type: 'radar',
  data: {
    labels: labels,
    datasets: [{
      data: data,
      fill: true,
      backgroundColor: 'rgba(0, 0, 255,0.2)',
      borderColor: 'rgb(0, 0, 255)'
    }]
  },
  options: {
    legend: {
      display: false
    },
    scale: {
      ticks: {
        stepSize: 1,
        max: max,
        callback: (v, i, values) => i + 1 < values.length ? '' : v
      },
      gridLines: {
        color: Array.from(Array(max).keys()).map((v, i) => i + 1 < max ? 0 : '#ccc')
      }
    }  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="radar-chart" height="80"></canvas>

edited Jul 9, 2022 at 15:04

answered Jul 9, 2022 at 5:55

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LeeLenalee Over a year ago

Answer is correct for V2, and op said he is using v2 this won’t work since he is using v3, see the error he is getting

LeeLenalee · Accepted Answer · 2022-07-09 06:40:35Z

From the error you are getting it seems like you are using Chart.js V3 and not V2. To get what you want you need to import and register everything if you want to use treeshaking, I suggest you do this at the latest part and for development import everything like so:

import Chart from 'chart.js/auto';

To hide and get the result what you want your config needs to look like this:

const labels = ['Things 1', 'Things 1', 'Things 1', 'Things 1', 'Things 1'];
const data = [0, 3, 5, 2, 3];

new Chart('radar-chart', {
  type: 'radar',
  data: {
    labels: labels,
    datasets: [{
      data: data,
      fill: true,
      backgroundColor: 'rgba(0, 0, 255,0.2)',
      borderColor: 'rgb(0, 0, 255)'
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      r: {
        ticks: {
          stepSize: 1,
          callback: (v, i, values) => i + 1 < values.length ? '' : v
        },
        grid: {
          color: data.map((v, i) => i + 1 < data.length ? 0 : '#ccc')
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<canvas id="radar-chart" height="80"></canvas>

Notice that I specify a r scale instead of x and y

Collectives™ on Stack Overflow

Remove grid lines and numbers on Chart.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related