Bar Chart Interactivity on click

giorgikok — Fri, 14 Apr 2023 19:04:20 GMT

Hello, I am trying to add chart interactivity and I've run into a problem. The selectionID of my chart that is kept in dataPoints does not seem to return correctly. After looking around and loggin the console I have found out that the datapoint being returned isn't of a regular type, it returns a t object with some cursor elements and the actual target rect.bar (+ a same looking srcElement). I was wondering if this is the correct approach and if so how would I access the selectionID of the individual bar in the bar chart?

Here's the code:

.on('click', (dataPoint) => {

console.log("CLICK DATA: ", dataPoint);

console.log("CLICK DATA TARGET: ", dataPoint.target);

console.log("CLICK DATA TARGET DATA: ", dataPoint.target.data);

console.log("CLICK DATA TARGET DATA SELECTION ID: ", dataPoint.target.data.SelectionId.getKey());

//const selected = !this.selectionManager.hasSelection();

console.log("UPDATE SELECTION ID: ", dataPoint.selectionId);

console.log("UPDATE SELECTION ID GETKEY: ", dataPoint.selectionId.getKey());

if (!dataPoint.selectionId) {

console.error("SelectionId is undefined for data point:", dataPoint);

return;

}

this.selectionManager

.select(dataPoint.selectionId, false)

.then((ids: ISelectionId[]) => {

this.syncSelectionState(barSelectionMerged, ids);

barSelectionMerged.style("fill", (d: BarChartDataPoint) => {

return ids.length > 0 && dataPoint.selectionId.equals(dataPoint.selectionId) ? "#7ACA00" : "#AAAAAA";

});

Re: Bar Chart Interactivity on click

giorgikok — Fri, 21 Apr 2023 16:29:39 GMT

figured it out:

const clickData = d3.select(d.target).datum() as { selectionId: ISelectionId };

this is how you get the selectionId

topic Re: Bar Chart Interactivity on click in Developer

Bar Chart Interactivity on click

Re: Bar Chart Interactivity on click