Remove grid lines and numbers on Chart.js-CodePudding

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

CodePudding user response：

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 1', 'Things 1', 'Things 1', 'Things 1'];
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>

CodePudding user response：

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