Data structures

    If the labels property of the main data property is used, it has to contain the same amount of elements as the dataset with the most values. These labels are used to label the index axis (default x axes). The values for the labels have to be provided in an array. The provided labels can be of the type string or number to be rendered correctly. In case you want multiline labels you can provide an array with each line as one entry in the array.

    When the data is an array of numbers, values from labels array at the same index are used for the index axis (x for vertical, y for horizontal charts).

    1. type: 'line',
    2. data: {
    3.   datasets: [{
    4.     data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
    5.   }]
    6. }
    1. type: 'bar',
    2. data: {
    3.   datasets: [{
    4.     data: [{x:'Sales', y:20}, {x:'Revenue', y:10}]
    5.   }]

    The values provided must be parsable by the associated scales or in the internal format of the associated scales. A common mistake would be to provide integers for the category scale, which uses integers as an internal format, where each integer represents an index in the labels array. null can be used for skipped values.

    When using the pie/doughnut, radar or polarArea chart type, the parsing object should have a key item that points to the value to look at. In this example, the doughnut chart will show two items with values 1500 and 500.

    1. type: 'doughnut',
    2. data: {
    4.         data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    5.     }]
    6. },
    7. options: {
    8.     parsing: {
    9.         key: 'nested.value'
    10.     }
    11. }

    When using object notation in a radar chart you still need a labels array with labels for the chart to show correctly.

    In this mode, property name is used for index scale and value for value scale. For vertical charts, index scale is x and value scale is y.

    1. const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
    2. const cfg = {
    3.     type: 'bar',
    4.     data: {
    5.         labels: ['Jan', 'Feb'],
    6.         datasets: [{
    7.             data: data,
    8.             parsing: {
    9.                 yAxisKey: 'net'
    10.             }
    11.         }, {
    12.             label: 'Cost of goods sold',
    13.             data: data,
    14.             parsing: {
    15.                 yAxisKey: 'cogs'
    16.             }
    17.         }, {
    18.             label: 'Gross margin',
    19.             data: data,
    20.             parsing: {
    21.                 yAxisKey: 'gm'
    22.             }
    23.         }]