Component library for rapid development of interactive analytical user interfaces
GoodData.UI was designed to help application developers quickly create and evolve interactive data analytics applications that are tailored to the needs of your users.
With pre-built components that connect directly to the GoodData platform and query engine, your productivity isn’t impacted by waiting on your back-end engineers.
Free (both as in “freedom” and “free beer”) and extensible, the open-source library makes it easy to get started with the Free tier of the GoodData cloud platform.
Get up and running quickly with a set of React.js components with Typescript types, granular packaging, detailed documentation, and interactive code samples.
Designed with productivity in mind
Put pre-built components like Lego bricks together without worrying about writing any backend code; the GoodData analytics platform takes care of all queries and APIs calls for you.
How does it work? Check out our interactive code examples at CodeSandbox.
A simple headline report in action.
Open in Code Sandbox
Try to uncomment a line to add the second series.
Open in Code Sandbox
Another simple visualization.
Open in Code Sandbox
A simple granularity control in action.
Open in Code SandboxBy developers for developers
We value simplicity, effectiveness, and good documentation, tutorials, and code samples. We don’t like surprises either, so our API Maturity annotations indicate the stability of individual APIs.
If you are ready to get started, we recommend following our tutorial or just scrolling down for more information.
Get started with the accelerator toolkit
Try it yourselfGet started with create-react-app
GoodData platformGoodData.CN
<LineChart
measures={[Md.Volume]}
trendBy={Md.DateMonth.Short}
config={{
colors: ['#14b2e2', '#02C18E']
}}
/>
Plug it any way you need.
The core part of GoodData.UI is available under the MIT license and is ready to use with the free tier of the GoodData cloud analytics platform.
It can be used with our pre-packaged filter components and Highcharts visualizations or with any of the thousands of controls and charting libraries available via npm.
<Execute
seriesBy={<[Md.Revenue]>}
slicesBy={<[Md.LocationCity]>}
filters={<filters>}
onLoadingChanged={function} onError={function}
children={/* your visualization component */}>
</Execute>
A comprehensive collection of visual GoodData.UI examples, from simple charts to interactive analytical mini-apps.
There is many ways how you can start your journey with our GoodData.UI. You can play with our interactice code samples, browse our huge gallery of live examples, discover all the possibilities in the documentation or discuss in our community.
Find all the details about GoodData.UI
See documentation
Try it yourself and play with our code samples
Try interactive code samples
Browse our huge library full of live visualisation examples
Browse gallery
Discuss, ask and learn from our community
View community