# Data Binding

The [data map](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data#datamap) for Chart.js 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 that contain the metric fields to be charted.  Each will become a series in on the chart. |
| label     | The field in the data that provides the series labels.  The values of this field 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 },
    { product: "Hats", sales: 1439 },
    { product: "Gloves", sales: 3849 },
]
const chart = new wire.chartjs().render("#chart", {
    type: "bar",
    data: salesData,
    datamap: {series: ["sales"], labels: "product"}
});
```