Forum Discussion
Solved
Bar Chart Interactivity on click
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:
Spoiler
.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";
});
});
});
figured it out:
const clickData = d3.select(d.target).datum() as { selectionId: ISelectionId };
this is how you get the selectionId
1 Reply
figured it out:
const clickData = d3.select(d.target).datum() as { selectionId: ISelectionId };
this is how you get the selectionId