1👍
If anyone still needs to know this. You can put it in the dataset itself to apply only to that dataset, in options.datasets.bubble to make it apply to all bubble datasets, in options.elements.point to apply it to all point elements or in the root of the options to apply it to the whole chart:
const image = new Image()
image.src = 'https://www.chartjs.org/docs/master/favicon.ico';
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 10,
r: 10
},
{
x: 30,
y: 22,
r: 25
}
],
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot'),
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)'
}]
},
options: {
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot'),
elements: {
point: {
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot')
}
},
datasets: {
bubble: {
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot')
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
image.onload = () => new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>To the pointStyle you can pass either a canvas element, image or one of the following strings:
- ‘circle’
- ‘cross’
- ‘crossRot’
- ‘dash’
- ‘line’
- ‘rect’
- ‘rectRounded’
- ‘rectRot’
- ‘star’
- ‘triangle’
Source:stackexchange.com