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
Try it yourself
<LineChart
measures={[Ldm.Volume]}
trendBy={Ldm.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={<[Ldm.Revenue]>}
slicesBy={<[Ldm.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.
Find all the details about
GoodData.UI
Try it yourself and play with our
code samples
Browse our huge library full of live
visualisation examples
Discuss, ask and learn from our
community