Chartist-js: Adding 'onclick' event to Stacked Bar Chart bars

[pathtoknowhere]

I'm having two issues:

1) There doesn't seem to be a unique element that's associated with each stacked bar. The stacked bars are divided into their components. I can assign a 'class' to the individual components of each bar, which sort of overcomes the issue, but I can't assign an 'id' to the bar as a whole. Is there an SVG solution akin to wrapping each stacked bar in a div?

2) Is there a pure javascript method to assign 'onclick' events to Chartist.js elements? I've seen others make use of jQuery in a React environment, but I need something more general. I also tried the "data.element.attr(onclick: *)" approach, but this results in an error where an extra '(' is reported by the console.

Are there any workarounds for these problems?

Thanks in advance.

[pathtoknowhere]

Using another user's code as a guide, I implemented a simple vanilla javascript solution to the second problem:

chart.on('draw', function(data) {
    if(data.type === 'bar') {
        data.element._node.onclick = myFunc(params);
    }
});

I was able to overcome the first problem by making use of 'data.index', which is unique to each stacked bar.

[Alangmahendra]

@Ice101781 is it possible to add onclick event for stacked bar (each bar(with different color) have its own click event )

[pathtoknowhere]

@Alangmahendra, sorry for the delayed reply! I was able to add a 'mouse hover' event to each bar in my chart, so I would think it's possible to add a 'mouse click' event as well. Have a look at the repo for the application and let me know if you have any questions.

[Alangmahendra]

@Ice101781 ,thanks for the res the response.. ,actually i've figure it out with writing this code: context.element._node.onclick = () => {
alert(context.value.x)
};
also i have another qustion for this shrinking svg area

any idea for this ? or should i open a new question ?