How to catch click or mouse hover Events.

[kjhatis]

Hi,

can you please provide a working example to catch events on the Bars for a bar chart and same for line chart. My code looks like below and i need to catch the event.

 <chartjs-line 
                    :id="chart.id"  
                    :labels="chart.labels" 
                    :datasets="chart.data"
                    :option="chart.options"
                    :width="500"
                    :height="250"></chartjs-line>

And Option Object looks like this:

{
                "id": "SystemAverages",
                "title": "Top Systems",
                "labels": [
                    "ASDF..",
                    "XYZ..",
                    "ABC.."
                ],
                "data": [
                    "79.6970",
                    "73.5294",
                    "77.0290"
                ],
                "mybackgroundcolor": [
                    "#35a400",
                    "#35a400",
                    "#35a400"
                ],
                "mybordercolor": [
                    "#35a400",
                    "#35a400",
                    "#35a400"
                ],
                "option": {
                    "responsive": true,
                    "events": [
                        "click"
                    ],
                    "onClick": "handleEvent",
                    "maintainAspectRatio": true,
                    "title": {
                        "display": true,
                        "position": "top",
                        "text": "Top Regional School Systems"
                    },
                    "scales": {
                        "yAxes": [
                            {
                                "stacked": true
                            }
                        ]
                    }
                }

Thanks!