Welcome toGoodData.UI

A powerful JavaScript library
for building analytical applications

Use analytics visualizations as simple React components

Build your application from ready-made and custom React components. Customize visualizations in just a few lines of code. No iframes involved.

View visual components

<LineChart
    projectId='<project-id>'
    measures={measures}
    trendBy={attribute}
    config={{
        colors: ['#14b2e2', '#02C18E']
    }}
/>

Create custom visualizations

Use the GoodData React data provider component to wrap any visualization, from libraries such as D3.js, Highcharts or Chart.js, up to your own custom code.

View custom visualization tutorial

more charts

<Execute afm={<afm>} projectId={<project-id>}
onLoadingChanged={function} onError={function}>
    {
        // your visualization code
    }
</Execute>

Powered by the GoodData platform

Ready-made components for ad hoc data analysis, machine learning recommendations and much more…

View live examples

Discover
Discover relations in your data using Analytical Designer, our tool for ad hoc analysis.
Learn more
Publish
Publish discovered insights to KPI dashboards. No coding involved.
Learn more
Embed
…or easily embed insights into your application using the GoodData.UI library.
Learn more

Code your first application

Install GoodData.UI

// optional - see how to install yarn, or npm.
$ yarn global add create-react-app
$ create-react-app my-first-app

// installation
$ cd my-first-app
$ yarn add @gooddata/react-components
$ yarn install

Check how to start development server

Get your project ID

Open your GoodData project in the browser.

Search for /projects/ in the address bar.

https://…gooddata.com/…/projects/ProjectID|…

Save the Project ID for later.

Don't have a GoodData project? Use Live Examples instead.

Add a visual component

// Add this snippet to src/App.js
import { LineChart } from '@gooddata/react-components';

<LineChart
    projectId='<project-id>'
    measures={measures}
    trendBy={attribute}
    config={{
        colors: ['#14b2e2']
    }}
/>

See how to get identifiers and how to define valid property structure.

Continue with the complete tutorial

See the GoodData.UI library

Get Started