Data Binding

The data map 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.

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