Scatter Plot

Scatter plot shows data as points using Cartesian coordinates. Scatter plots typically have a minimum of two measures, one for the X-axis and the other for the Y-axis, and one attribute, which determines the meaning of each data point. Scatter plots are useful for analyzing trends between two measures or for tracking the magnitude of two measures from the same chart.

Structure

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

<ScatterPlot
    projectId={<workspace-id>}
    xAxisMeasure={<measure>}
    yAxisMeasure={<measure>}
    attribute={<attribute>}
    config={<chart-config>}
    sdk={<sdk>}
    …
/>

Example

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

const measures = [
    {
        measure: {
            localIdentifier: 'franchiseFeesIdentifier',
            definition: {
                measureDefinition: {
                    item: {
                        identifier: franchiseFeesIdentifier
                    }
                }
            },
            format: '#,##0'
        }
    },
    {
        measure: {
            localIdentifier: 'franchisedSalesIdentifier',
            definition: {
                measureDefinition: {
                    item: {
                        identifier: franchisedSalesIdentifier
                    }
                }
            },
            format: '#,##0'
        }
    }
];

const attribute = {
    visualizationAttribute: {
        displayForm: {
            identifier: monthDateIdentifier
        },
        localIdentifier: 'month'
    }
};

<div style={{ height: 300 }}>
    <ScatterPlot
        projectId={workspaceId}
        xAxisMeasure={measures[0]}
        yAxisMeasure={measures[1]}
        attribute={attribute}
    />
</div>

Properties

Name	Required?	Type	Description
projectId	true	string	The workspace ID
xAxisMeasure	false	Measure	A measure definition (at least one of xAxisMeasure or yAxisMeasure must be provided for the scatter plot to render properly)
yAxisMeasure	false	Measure	A measure definition (at least one of xAxisMeasure or yAxisMeasure must be provided for the scatter plot to render properly)
attribute	false	Attribute	An attribute definition
filters	false	Filter[]	An array of filter definitions
sortBy	false	SortItem[]	An array of sort definitions
config	false	ChartConfig	The chart configuration object
locale	false	string	The localization of the chart. Defaults to en-US. For other languages, see the full list of available localizations.
drillableItems	false	DrillableItem[]	An array of points and attribute values to be drillable.
sdk	false	SDK	A configuration object where you can define a custom domain and other API options
ErrorComponent	false	Component	A component to be rendered if this component is in error state
LoadingComponent	false	Component	A component to be rendered if this component is in loading state
onError	false	Function	A callback when component updates its error state
onLoadingChanged	false	Function	A callback when component updates its loading state

The following example shows the supported config structure with sample values. To see descriptions of individual options, see ChartConfig section.

{
    colors: ['rgb(195, 49, 73)', 'rgb(168, 194, 86)'],
    colorPalette: [{
        guid: '01',
        fill: {
            r: 195,
            g: 49,
            b: 73
        }
    }, {
        guid: '02',
        fill: {
            r: 168,
            g: 194,
            b: 86
        }
    }],
    colorMapping: [{
        predicate: (headerItem) => {
            return headerItem.measureHeaderItem && (headerItem.measureHeaderItem.localIdentifier === 'm1_localIdentifier')
        },
        color: {
            type: 'guid',
            value: '02'
        }
    }],
    xaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: 'auto',
        min: '20',
        max: '30'
    },
    yaxis: {
        visible: true,
        labelsEnabled: true,
        rotation: 'auto',
        min: '40',
        max: '50'
    },
    dataLabels: {
        visible: 'auto'
    },
    grid: {
        enabled: true
    }
    separators: {
        thousand: ',',
        decimal: '.'
    }
}