I'd like to change a size of the point in my chart.
The point should be as small as possible. Was trying to use
pointHoverRadius: 1
But it doesn't work.
Thanks in advance,
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 .
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.
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.
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.
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
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: {
...
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With