Visualization · GoodData.UI

Visualization is a generic component that renders a table or a chart according to the provided URI or identifier.

Structure

import '@gooddata/react-components/styles/css/main.css';
import { Visualization } from '@gooddata/react-components';

<div style={{ height: 400, width: 600 }}>
    <Visualization
        projectId="<workspace-id>"
        identifier="<visualization-identifier>"
        config={<chart-config>}
        sdk={<sdk>}
    />
</div>

import '@gooddata/react-components/styles/css/main.css';
import { Visualization } from '@gooddata/react-components';

<div style={{ height: 400, width: 600 }}>
    <Visualization
        projectId="<workspace-id>"
        uri="<visualization-uri>"
        config={<chart-config>}
        sdk={<sdk>}
    />
</div>

NOTE: A set of options in <chart-config> is different for each Visualization component and depends on the type of the embedded visualization.

Example

import '@gooddata/react-components/styles/css/main.css';
import { Visualization } from '@gooddata/react-components';

<div style={{ height: 400, width: 600 }}>
    <Visualization
        identifier="aoJqpe5Ib4mO"
        projectId="la84vcyhrq8jwbu4wpipw66q2sqeb923"
        config={{
            colors: ['rgb(195, 49, 73)', 'rgb(168, 194, 86)'],
            legend: {
                enabled: true,
                position: 'bottom'
            }
        }}
    />
</div>

Filters

For more information, see Filter Visual Components.

Caching

To properly render the referenced table or chart, the Visualization component needs additional information from the GoodData platform. This information is usually static. To minimize the number of redundant requests and reduce the rendering time, some static information (such as the list of visualization classes, the color palette, or feature flags for each workspace) is cached for all Visualization components in the same application.

The amount of the cached information does not impact performance in any way. However, you can manually clear the cache whenever needed (for example, after logging out, when switching workspaces or leaving a page with visualizations using the GoodData.UI components).

import { clearSdkCache } from '@gooddata/react-components/dist/helpers/sdkCache';
...
clearSdkCache();
...

Properties

Name	Required?	Type	Description
projectId	true	string	The workspace ID
uri	false	string	The URI of the visualization to be rendered. Can be omitted if the visualization identifier is present.
identifier	false	string	The identifier of the visualization to be rendered. Can be omitted if the visualization URI is present.
locale	false	string	The localization of the visualization. Defaults to `en-US`. For other languages, see the full list of available localizations.
config	false	ChartConfig	The chart configuration object
filters	false	FilterItem[]	An array of filter definitions
drillableItems	false	DrillableItem[]	An array of points and attribute values to be drillable.
onFiredDrillEvent	false	onFiredDrillEvent()	The drilling event catcher. Called when drilling happens.
sdk	false	SDK	A configuration object where you can define a custom domain and other API options
uriResolver	false	function	A custom method for querying URIs for identifiers. Defaults to the standard Gooddata SDK. `getObjectUri()`.
onError	false	function	A custom error handler. Called with the argument containing the state and original error message, for example: `{ status:ErrorStates.BAD_REQUEST,error: {...} }`. See the full list of error states. Defaults to `console.error`.
onExportReady	false	Function	A callback when the component is ready for exporting its data
onLoadingChanged	false	function	A custom loading handler. Called when a visualization changes to/from the loading state. Called with the argument denoting a valid state, for example: `{ isLoading:false}`.
onLegendReady	false	onLegendReady()	The legend ready callback. Called when the visualization series are ready to render. Can be used for rendering a custom legend.