Chart bar click event

Webix JS
1

I have a chart with two bars for each x-point.
I need to catch the click on the single bar and get the value for both x and y.
Do you have any tip?

Here there is my code:

webix.ui({
                        view: "chart",
                        type: "bar",
                        barWidth: 60,
                        radius: 2,
                        gradient: "rising",
                        xAxis:{
                            title: "Magnitudo",
                            template: function (obj) {
                                if (obj.id === -2) {
                                    return "0";
                                } else {
                                    return obj.id;
                                }
                            }
                        },
                        yAxis:{
                            title: "Rischi Aperti/Chiusi",
                            start: 0,
                            step: 5,
                            //end: 100
                        },
                        legend:{
                            values:[
                                {
                                    text: "Aperti",
                                    color: "#26609b",
                                },
                                {
                                    text: "Chiusi",
                                    color: "#b9723a",
                                }
                            ],
                            valign: "middle",
                            align: "right",
                            width: 90,
                            layout: "y",
                            toggle: false
                        },
                        series: [
                            {
                                value: function (obj) {
                                    return obj.Aperte;
                                },
                                color: function (obj) {
                                    return "#26609b";
                                },
                                tooltip: function (obj) {
                                    return obj.Aperte;
                                },
                                id: "rischiAperti",
                            },
                            {
                                value: function (obj) {
                                    return obj.Chiuse;
                                },
                                color: function (obj) {
                                    return "#b9723a";
                                },
                                tooltip: function (obj) {
                                    return obj.Chiuse;
                                },
                                id: "rischiChiusi", 
                            },
                        ],
                        /*on: {
                            onItemClick: function (id) {
                                var item = dashboardAPI.rischiPerMagnitudo.getItem(id);
                                if (id === "-2") {
                                    item.id = 0;
                                }
                                console.log(item);
                            }
                        },*/
                        data: arrayRischiAPI,
                    }, $$('lytChartRischiPerMagnitudo'));
2

Hello, Gianluigi
To get the needed info from the click on the current bar we use the onItemClick event. It accepts parameters *string *, *Event *,HTMLElement node.

Using node.getAttribute(“userdata”) we can get the index of the clicked item. Using this index we can get the name of the clicked field: const s = this.config.series[seriesInd]. And using that field value we can get the values of clicked item:

const field = s.value.replace(/#/g,“”);
const value = item[field];

You can check the example here: Code Snippet .

Please note that if .getItem(id) is called from any webix component, you shouldn’t change the id of the item this way. This is a unique data identifier and cannot be changed directly. To do this, you should use method changeId from chart’s DataStore. And here is the example of how to use it: Code Snippet .

Moreover, webix does not support zero (number) as an identifier. You can read it here: Data Loading of Guides, Loading and Storing Data Webix Docs .

1 Like