> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/highcharts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/highcharts/events.md).

# Events

Highcharts for WireBootstrap extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all its base events. 

The following events are added to Highcharts for WireBootstrap.

| Name       | Description                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| pointClick | Raised when a series in the component is clicked.  This is triggered internally by [Highcharts native series point click event](https://api.highcharts.com/highcharts/plotOptions.series.point.events.click).  The even will also raise a [data event](/highcharts/events.md#data-event) passing the standard WireBootstrap [user event data](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/events). |

```javascript
new wire.highcharts().render("#chart", {
    ...
    events: {
        pointClick: (config) => {
            ...
        }    
    }
});
```

## Data Event

By default, the `pointClick` event will also trigger a [select data event](https://docs.wirebootstrap.com/wirebootstrap/data-events/raising-events) which sends data out to [DataSets](https://docs.wirebootstrap.com/wirebootstrap/dataevents) and other data event listeners.   The field sent out will be the one(s) specified in the [categories data map](/highcharts/data-binding.md).  To override this default behavior, use the `eventField` property in the binding configuration.

In the example below, the `product` in the series and its value would normally be sent out in the data event as the [cell](https://docs.wirebootstrap.com/wirebootstrap/data-events/raising-events) triggering the event.  However, the `eventField` tells the component to use the `region` field instead.

```javascript
const salesData = [
    { region: "North", product: "Shirts", sales: 2544 },
    { region: "North", product: "Hats", sales: 1439 },
    { region: "South", product: "Gloves", sales: 3849 },
]
const chart = new wire.highcharts().render("#chart", {
    type: "bar",
    data: salesData,
    datamap: {series: ["sales", "cost"], categories: "product"},
    eventField: "region"
});
```