Component description

The api-chart component configures charts and graphs that can be added to pages/dashboards.

Example

Minimal JSON

{
  "type":"api-chart",
  "title":"",
  "data":{
    "datasets":[

    ]
  }"definition":{

  }
}
{
  "key": "chart_visited_pages",
  "template": {
    "componentId": "chart_visited_pages",
    "type": "api-chart",
    "title": "dashboard.title.visited_pages",
    "data": {
      "datasets": [
        {
          "dataApi": "https://help.dawiso.com/api/chart/statistics/core_statistic_chart_number_visited_pages/buckets",
          "options": {
            "maintainAspectRatio": false,
            "label": "total"
          }
        }
      ]
    },
    "definition": {
      "type": "line",
      "options": {
        "maintainAspectRatio": false,
        "plugins": {
          "legend": {
            "display": false
          }
        },
        "scales": {
          "y": {
            "beginAtZero": true
          },
          "x": {
            "grid": {
              "display": false
            }
          }
        }
      }
    }
  }
}

Example taken from the core_dashboard_adoption package.

Nested properties

PropertyDescriptionValuesMandatory
typeapi-chartstringYes
titleTranslation key of the title. Define the key in translations to specify how the text is displayed in the UI. Unlike the name property, if you use a specific string of text for the title, this text will appear with the package key. For example, Comment Section will be displayed as package_key_comment section.string*Yes
dataJSON object listing datasets used in the chart. Each dataset can have its own visual configuration.jsonYes
definitionObject defining the visual aspects of the chart using Chart.js configuration.jsonYes
componentIdUnique ID of a component. If left empty, a random string will be generated. Primarily used in patch packages to define the component's position within the layout (template).stringNo
subTitleKey of the translation used as the component subtitle.stringNo