This article describes how to install GoodData.UI and a few steps to accomplish before you can start creating your visualizations.
NOTE: Before you install GoodData.UI, make sure that you have a GoodData account (see About GoodData.UI).
Run the following to install packages necessary to render charts:
yarn add @gooddata/sdk-backend-bear @gooddata/sdk-model @gooddata/sdk-ui @gooddata/sdk-ui-charts @gooddata/sdk-ui-pivot @gooddata/sdk-ui-geo @gooddata/sdk-ui-ext
npm install @gooddata/sdk-backend-bear @gooddata/sdk-model @gooddata/sdk-ui @gooddata/sdk-ui-charts @gooddata/sdk-ui-pivot @gooddata/sdk-ui-geo @gooddata/sdk-ui-ext
NOTE: Check out Architecture Overview to learn about additional packages that you can include and render (for instance, pivot tables or geo pushpin charts).
Important: Use the same version everywhere
For smooth developer experience, make sure that your application always uses the same versions of all GoodData.UI packages. Do not
mix and match different versions. Always upgrade the
@gooddata packages to the same version.
Before you start coding
Get your project ID. The project ID is a unique 32-character identifier of your project within the GoodData platform. You need your project ID to connect your project with the visualizations that you are going to create. To get your project ID, see Find the Project ID.
Obtain object identifiers using catalog-export. The object identifier is a reference to a project object. You need the identifiers to display attributes, measures, visualizations, filters, and other objects.
The identifier of an object is consistent across your domain regardless of the GoodData project it lives in. The object identifier is a text string. Example:
Pick a visualization type from the prepared React components (table, column chart, bar chart, and so on) and, optionally, one or more properties to use with the selected visualization. Alternatively, you can fetch raw data and create a fully custom visualization.