> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/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/pro-pack/sparklines/data-binding.md).

# Data Binding

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

## Properties

| Name  | Description                                              |
| ----- | -------------------------------------------------------- |
| value | The field containing the values to be used in the chart. |

## Datamap

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

The following example creates a bar chart showing sales for six months.

```javascript
const salesData = [
    { month: "Jan", sales: 2544 },
    { month: "Feb", sales: 1439 },
    { month: "Mar", sales: 3849 },
    { month: "Apr", sales: 2341 },
    { month: "May", sales: 2932 },
    { month: "Jun", sales: 1976 }
]
new wire.sparkline().render("#chart", {
    data: salesData,
    datamap: {value: "sales"}
});
```