Visualization

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.

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.
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.