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

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