I have a chart where all the visual points are disabled, I have disabled them by doing this:
const options = {
elements: {
point: {
radius: 0,
},
}
My issue is that I actually want to have the point enabled only for the very last point, please see this image: http://prntscr.com/1tq0zql
I have found a way to target that last line by using segments:
const data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [
{
data: tgpDatasets,
borderColor: "rgba(103,120,137,1)",
borderWidth: 1,
segment: {
borderColor: ({ p0DataIndex, p1DataIndex }) => p0DataIndex === 8 && p1DataIndex === 9 && "red",
},
},
],
};
The above code will make the last line of the chart red, please see this screenshot: http://prntscr.com/1tq155f
My question is how to enable a point for that very last point of the chart and set its porperties, when the radius is controlled from the options object and not from the dataset object?
You can use scriptable options for this like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
}
]
},
options: {
elements: {
point: {
radius: (ctx) => (ctx.chart.data.datasets[ctx.datasetIndex].data.length - 1 === ctx.index ? 10 : 0)
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>