Change point size and color on click.

[katsuragi545]

How do you go about changing the a point's color and size when clicked (I'm using a scatter line chart)?

This is the function I've created:

        canvas.onclick = function (evt) {
            var activePoints = scatterChart.getElementsAtEvent(evt);

            if (activePoints.length > 0) {

                activePoints[0]._model.radius = 7;
                activePoints[0]._model.backgroundColor = 'rgba(0,0,255,1)';
                activePoints[0]._model.borderWidth = 5;

                scatterChart.update();
            }
        }

When this function is executed, I notice that the point size does indeed change size and color, but it immediately goes back to the default size and color. How do I make the size/color changes permanent?

[katsuragi545]

Slipped my mind - I asked a similar question before back when I was using a Chart.js wrapper (using pure Chart.js now)

var activePoint = scatterChart.getElementAtEvent(evt);
var selectedPoint = activePoint[0];
selectedPoint.custom = this.selectedPoint.custom || {};
selectedPoint.custom.backgroundColor = 'rgba(128,128,128,1)';
selectedPoint.custom.radius = 7;