CODEWITHSUNDEEP
javascriptchart.js
Web_GIS
Web_GIS

Reputation: 123

Change point style in Chartjs via external event

I'm trying to change the point style of a specific element in a line chart via an external 'mouseover' event. This event retrieves the index number of the element in the line chart of which I would like to change the styling. My code now changes the point style in the whole graph instead of just 1 element, see below:

function highlightGraph(linkid) {
            var chartIndexArray = chart.data

            // Retrieve the corrosponding index of the value in the chart
            var chartIndex = chartIndexArray.labels.indexOf(linkid)

            // Changes every point element -- Not what I want
            chart.data.datasets[0].pointBackgroundColor = 'rgba(255,255,255)';

            // Changes only the retrieved index point -- Does nothing
            chart.data.datasets[0].data[chartIndex].pointBackgroundColor = 'rgba(0,0,0';

            chart.update();
}

My question is very similair to this: Change point color on click using ChartJS , however I'm not changing the styling onHover within the chart, but onHover on another element (d3.Select) on my page. As a result I'm unable to use the getElementAtEvent to access chart elements.

Thank you for your time.

EDIT: see this fiddle: https://jsfiddle.net/rm6abn2t/194/ in which I'm trying to change only the blue dot to a white dot via a function.

Upvotes: 2

Views: 2517

Answers (1)

Kitanga Nday
Kitanga Nday

Reputation: 3565

As illustrated in this jsfiddle

So it's not this:

myChart.data.datasets[0].data[chartIndex].pointBackgroundColor = 'white';

But this:

myChart.data.datasets[0].pointBackgroundColor[chartIndex] = 'white';

Upvotes: 1

Related Questions