<aside> 🚧 Pardon the Notion doc, we'll publish a proper documentation page that lives up to our design standards very soon!

</aside>

In-depth guide to the Bar Chart & Line Chart widgets

The Bar Chart and Line Chart widgets allow you to map any array, containing numeric values, into a beautiful chart.

1. Connecting to a JSON API response

Let's take a look at how to hook them up to a JSON API response.

The Endpoint and Path properties are the building blocks of our chart widgets.

Consider following JSON response:

{
  "field1": 30,
  "nested": {
    "field2": 20,
    "simpleArray": [10.6, 34, 34, 45.2, 97.9, 34.6, 54, 17, 72],
    "series": [
      {
        "timeframe": {
          "start": "2021-06-20T00:00:00.000Z",
          "end": "2021-06-21T00:00:00.000Z"
        },
        "value": 13
      },
      {
        "timeframe": {
          "start": "2021-06-21T00:00:00.000Z",
          "end": "2021-06-22T00:00:00.000Z"
        },
        "value": 9
      },
      {
        "timeframe": {
          "start": "2021-06-22T00:00:00.000Z",
          "end": "2021-06-23T00:00:00.000Z"
        },
        "value": 16
      },
      {
        "timeframe": {
          "start": "2021-06-23T00:00:00.000Z",
          "end": "2021-06-24T00:00:00.000Z"
        },
        "value": 22
      },
      {
        "timeframe": {
          "start": "2021-06-25T00:00:00.000Z",
          "end": "2021-06-26T00:00:00.000Z"
        },
        "value": 19
      }
    ],
    //...
  }
}

• Let's fill the Endpoint value with URL to our API endpoint returning a JSON response: https://dashful.co/api/example.

• The Path property uses a dot-notation. The above JSON has a simpleArray array, nested in the nested object. The correct path for this array is:

  nested.simpleArray

This will map all the values in the array into the chart.

What about a bit more complex arrays, containing objects, like the series above? Let's say we want to map all the value property values of the objects in that array into the chart. In this case, the Path will be following:

nested.series.value

2. Modifying the output