Box Gridlines for Radar Charts

[neelsgn]

Hi Team,

I’m creating radar charts using Quickcharts and while I am able to created the radar chart itself, I was wondering if I could also add a gridline box to the radar chart similar to what is being shown in the image below.

This chart was created using the now disabled Google Image Charts and the gridlines have the ff properties:

chg=25.0,25.0,4.0,4.0

[ian]

Hi @neelsgn, the way to do this in Chart.js is a bit of a workaround - it involves adding a dummy data series that requires a cartesian (grid) axis. See Chart.js axis styling docs.

Here’s an example in Chart.js v4:

{
  type: 'radar',
  data: {
    labels: [
      'Eating',
      'Drinking',
      'Sleeping',
      'Designing',
      'Coding',
      'Cycling',
      'Running',
    ],
    datasets: [
      {
        label: 'My First Dataset',
        data: [65, 59, 90, 81, 56, 55, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
      },
      {
        label: 'My Second Dataset',
        data: [28, 48, 40, 19, 96, 27, 100],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
      },
      {
        type: 'bar',
      },
    ],
  },
  options: {
    scales: {
      r: {
        grid: {
          display: false,
        },
      },
      x: {
        ticks: {
          display: false,
        },
        grid: {
          borderDash: [5, 5],
        },
      },
      y: {
        ticks: {
          display: false,
        },
        grid: {
          borderDash: [5, 5],
        },
      },
    },
  },
}

Link to chart editor