Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,

like image 507
Vba_Beg Avatar asked Sep 13 '17 09:09

Vba_Beg


People also ask

How do I change the size of my ChartJS?

To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .

Is ChartJS customizable?

If you have a simple dataset with few customization tweaks, it's a great solution. However, as your data visualization and customization needs grow — the more you'll benefit from getting under the hood of ChartJS. We can refer directly to the ChartJS documentation and customize as much as we need.

Does ChartJS use canvas?

A Node JS renderer for Chart. js using canvas. Provides and alternative to chartjs-node that does not require jsdom (or the global variables that this requires) and allows chartJS as a peer dependency, so you can manage its version yourself.

What is utils in ChartJS?

The Utils file contains multiple helper functions that the chart. js sample pages use to generate charts. These functions are subject to change, including but not limited to breaking changes without prior notice. Because of this please don't rely on this file in production environments.


2 Answers

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
like image 59
ɢʀᴜɴᴛ Avatar answered Oct 12 '22 10:10

ɢʀᴜɴᴛ


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: {
       ...
    }

}
like image 38
av01d Avatar answered Oct 12 '22 09:10

av01d