Trouble setting options for radar chart on Quickchart.io

Question

I'm trying to make a radar chart using quickchart.io. I accomplished the look I want on raw html, but for some reason, quickchart doesn't like it when it comes to radial option :(

{
  type: 'radar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [
      {
        data: [5, 4, 3, 3, 5],
        label: 'Dataset'
      },
      {
        data: [5, 4, 5, 3, 2],
        label: 'Dataset 2'
      }
    ],
  },
  options: {
    scales: {
      r: [
        {
          min:'0',
          max:'5',
          ticks: {
            stepSize: '1'
          },
        },
      ],
    }
  },
}

It looks like it's totally ignoring everything in options. As you can see, I want the chart always start from 0 and tick mark increased by 1. Here's the result of the code above:

https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27radar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20r%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D%0A

Can anyone help me?

Answer 1

You are trying to use v3 syntax but you are using it incorrect, the scales dont use arrays anymore. You also have to specify to quickchart you are using v3 like so https://quickchart.io/chart?version=3&c=CHARTCONFIG

Correct scale config V3 for you:

scales: {
      r:{
        min:'0',
        max:'5',
        ticks: {
          stepSize: '1'
        },
      },
    }

Working url based on your sample: https://quickchart.io/chart?version=3&c=%7B%0D%0A%20%20type%3A%20%27radar%27%2C%0D%0A%20%20data%3A%20%7B%0D%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0D%0A%20%20%20%20datasets%3A%20%5B%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0D%0A%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%5D%2C%0D%0A%20%20%7D%2C%0D%0A%20%20options%3A%20%7B%0D%0A%20%20%20%20scales%3A%20%7B%0D%0A%20%20%20%20%20%20r%3A%20%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7D%0D%0A%20%20%7D%2C%0D%0A%7D

Answer 2

quickchart.io defaults to latest Chart.js v2 according to their documentation. Therefore, your chart options need to be written as follows. Alternatively you can try to define the version parameter to explicitly tell quickchart.io to use Chart.js v3.

options: {
  scale: {      
    ticks: {
      suggestedMin: 0,
      suggestedMax: 5,
      stepSize: '1'
    }    
  }
}

For further details about the latest Chart.js v2 radar charts, please consult https://www.chartjs.org/docs/2.9.4/charts/radar.html