Events

Highcharts for WireBootstrap extends the 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. The even will also raise a data event passing the standard WireBootstrap user event data.

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

Data Event

By default, the pointClick event will also trigger a select data event which sends data out to DataSets and other data event listeners. The field sent out will be the one(s) specified in the categories data map. 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 triggering the event. However, the eventField tells the component to use the region field instead.

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