Documentation - Added type number[] to radius

[waszkiewiczja]

I updated the documentation regarding the type of radius.
As mentiond #11642 here radius can be number but also number[].

[LeeLenaleee]

All the properties are indexable so you can also add this to the other props

[DAcodedBEAT]

@LeeLenaleee Can you clarify what this means? I would be saddened if a documentation update held up the 4.5.0 release

[DAcodedBEAT]

@LeeLenaleee let's move this to Milestone 5.0 ?

[LeeLenaleee]

No this is not breaking, so it will be moved to the next non breaking version

[nakanoh]

Based on the test file test/types/controllers/radar_dataset_indexable_options.ts, we might be able to add the following properties to the Point Configuration section:

• hoverRadius: number|number[]
• pointBackgroundColor: Color|Color[]
• pointBorderColor: Color|Color[]
• pointBorderWidth: number|number[]
• pointHitRadius: number|number[]
• pointHoverBackgroundColor: Color|Color[]
• pointHoverBorderColor: Color|Color[]
• pointHoverBorderWidth: number|number[]
• pointHoverRadius: number|number[]
• pointRadius: number|number[]
• pointRotation: number|number[]
• pointStyle: pointStyle|pointStyle[]
• radius: number|number[]

This would help users who are looking to customize individual points in their charts, as reported in #11642.

Here's an example from the test file showing these properties being used as arrays in a radar chart configuration:

// test/types/controllers/radar_dataset_indexable_options.ts
const chart = new Chart('test', {
  type: 'radar',
  data: {
    labels: ['a', 'b', 'c'],
    datasets: [{
      data: [1, 2, 3],
      hoverRadius: [1, 2, 3],
      pointBackgroundColor: ['red', 'green', 'blue'],
      pointBorderColor: ['red', 'green', 'blue'],
      pointBorderWidth: [1, 2, 3],
      pointHitRadius: [1, 2, 3],
      pointHoverBackgroundColor: ['red', 'green', 'blue'],
      pointHoverBorderColor: ['red', 'green', 'blue'],
      pointHoverBorderWidth: [1, 2, 3],
      pointHoverRadius: [1, 2, 3],
      pointRadius: [1, 2, 3],
      pointRotation: [1, 2, 3],
      pointStyle: ['circle', 'cross', 'crossRot'],
      radius: [1, 2, 3],
    }]
  },
});