Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Documentation - Added type number[] to radius

Open waszkiewiczja opened this issue 1 year ago • 3 comments

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

waszkiewiczja avatar Feb 11 '24 02:02 waszkiewiczja

@LeeLenaleee let's move this to Milestone 5.0 ?

DAcodedBEAT avatar May 17 '24 13:05 DAcodedBEAT

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

LeeLenaleee avatar May 17 '24 13:05 LeeLenaleee

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],
    }]
  },
});

nakanoh avatar Jun 10 '25 02:06 nakanoh