Highlighting a chart point doesn't occur automatically.

I have a chart that highlights a chart point (by changing the size and color) whenever it is done animating the first time it is drawn. However, the highlighting only visually happens when the user moves their mouse pointer over one of the points. How can I make the highlight happen automatically without needing to move my mouse over one of the points.

Here’s my highlight function:

    // Highlights the original op point by changing the point color and size
    highlightOriginalOpPoint(atrc: AtrConfiguration) {

            // This index determines which chart point to highlight
            this.originalOpPointIndex = 1; 

            // Get op point object and change the radius/color
            let meta = this.scatterChart.getDatasetMeta(0);

            let opPoint = meta.data[this.originalOpPointIndex];
            opPoint.custom = opPoint.custom || {};
            opPoint.custom.backgroundColor = "rgba(0,0,225,1)";
            opPoint.custom.radius = 7;

            this.scatterChart.update();
        }
    }

This is called when the chart is done animating the first time it is drawn - I’ve checked my logs too - it’s definitely being called when it is done drawing but the effects don’t visually happen until the user moves their mouse over one of the points. I’ve added update() to my highlight function but the update doesn’t seem to happen until later. Any ideas?

[etimberg]

@katsuragi545 I got it working here http://jsfiddle.net/jjawbtce/1/

I added a comment before the call to update describing my change.

[katsuragi545]

Thanks @etimberg - works perfectly! You’ve saved me a lot of time. Thanks for the explanation as well.