# Data Binding

The [data map](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data#datamap) for Highcharts for WireBootstrap is listed below.  The component expects these field names in its `data` configuration.

## Properties

| Name       | Description                                                                                                                                                                                                 |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| series\[]  | An array of the fields in the data contain the metric fields to be charted.  Each will become a series in on the chart.                                                                                     |
| categories | This value can be either an array of fields \[string] or a field name (string).  The value provides the field name(s) for the series labels.  The values of these field(s) will be displayed on the x-axis. |

## Datamap

Use the `datamap` configuration property to bind a data structure to the component.

The following example creates a bar chart showing sales for three products.

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

## Series

For more control over how Highcharts plots a given metric in a series, create a native [series](https://api.highcharts.com/highcharts/series) object.  

The following example tells the chart to plot the `cost` metric as a line on the second y-axis.  The `sales` metric defaults to the first y-axis and uses the default type for the chart specified as `bar`.

```javascript
const salesData = [
    { product: "Shirts", sales: 2544, cost: 1945 },
    { product: "Hats", sales: 1439, cost: 1392 },
    { product: "Gloves", sales: 3849, cost: 2964 },
]
const chart = new wire.highcharts().render("#chart", {
    type: "bar",
    data: salesData,
    datamap: {series: ["sales", "cost"], categories: "product"}
    highcharts: {
        series: [{
           name: "cost", type: "line", yAxis: 1
        }]
    }
});
```


---

# 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/data-binding.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.