# 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"
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wirebootstrap.com/highcharts/events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.