Data Binding

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

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 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.

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