I’ve gotten a couple questions recently about how to dynamically set the size of points for on Chart.js line chart. This is a good opportunity to describe two powerful features of Chart.js: indexable options and scriptable options.
Indexable options
Using the example of point size, pointRadius can be an array. Each element in the array corresponds to a data point. This type of option is known as an “indexable” option.
For example, this configuration will make the first and third points have a 10-pixel radius:
{
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Users',
data: [50, 60, 70, 180],
pointRadius: [10, 0, 10, 0]
}]
}
}
(sandbox link)
Scriptable options
In addition to Indexable options, you can achieve a lot more by using the powerful concept of Scriptable Options.
Here’s an example of using a scriptable option to make any datapoint greater than 65 show with a large point:
{
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Users',
data: [50, 60, 70, 180],
borderColor: '#ff0000',
backgroundColor: '#ff000033',
}]
},
options: {
elements: {
point: {
radius: (context) => {
const index = context.dataIndex;
const value = context.dataset.data[index];
return value > 65 ? 10 : 0;
}
}
}
}
}
Scriptable options are not just for point radii – with Chart.js v3, most options are scriptable! In the example below, we compute a random borderColor on a bar chart and dynamically title the chart based on the sum of its data.
{
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Users',
data: [50, 60, 70, 180],
borderColor: (context) => `#${Math.floor(Math.random()*16777215).toString(16)}`,
borderWidth: 4,
backgroundColor: '#eee',
}]
},
options: {
plugins: {
title: {
display: true,
text: (context) => {
const dataset = context.chart.data.datasets[0];
let sum = 0;
for (let i=0; i < dataset.data.length; i++) {
sum += dataset.data[i];
}
return `Total sum: ${sum}`;
}
}
}
}
}
(sandbox link)
Scriptable options with Chart.js open up a wide range of possibilities and special customized logic 
Hope this helps a few people. Let me know if you have any questions!
