CODEWITHSUNDEEP
javascriptchart.js
Vba_Beg
Vba_Beg

Reputation: 523

how to change size of point in ChartJS

I'd like to change a size of the point in my chart. enter image description here

The point should be as small as possible. Was trying to use

pointHoverRadius: 1

But it doesn't work.

Thanks in advance,

Upvotes: 38

Views: 45026

Answers (3)

ado387
ado387

Reputation: 333

In ChartJS documentation it instructs us to edit options.elements.point object for customizing how point looks.

There are two fields that might be of interest for this question:

  • radius how big should point generally be (you probably want this one)
  • hoverRadius how big should point be when user hovers on it

So final example of options object would be (skipping unrelated properties):

const options = {
  elements: {
    point: {
      radius: 1,
      hoverRadius: 2, // ex.: to make it bigger when user hovers put larger number than radius.
    }
  }
}

Upvotes: 2

av01d
av01d

Reputation: 648

It indeed needs to go in the dataset, like so:

{
    type: 'scatter',
    data: {
        labels: ['2015', '2016', '2017', '2018', '2019', '2020'],
        datasets: [
            {
                label: 'Cars',
                data: [{x:-10,y:0}, {x:0,y:10}, {x:10,y:5}, {x:4,y:8}],
                pointRadius: 10,
                ....
            },
            {
                label: 'Bikes',
                data: [{x:10,y:3}, {x:-2,y:6}, {x:9,y:3}, {x:11,y:6}],
                pointRadius: 10,
                ...
            }
        ]
    },
    options: {
       ...
    }

}

Upvotes: 35

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

You would have to set the pointRadius property to 1 as well (so the point becomes small initially), along with the pointHoverRadius (remains small on hover)

pointRadius: 1,
pointHoverRadius: 1

Upvotes: 59

Related Questions