Scatter plot

A 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, such as age and income, or for tracking the magnitude of two measures from the same chart. Advanced configuration allows segmentation of the data by specified attribute and clustering.

Buckets

Prop	Required	Takes	What it does
`xAxisMeasure`	No	One measure	Positions the points on the X axis.
`yAxisMeasure`	No	One measure	Positions the points on the Y axis.
`attribute`	No	One attribute	Creates one point per attribute value.
`segmentBy`	No	One attribute	Splits the points into segments, each in its own color.
`filters`	No	Filters	Limits the data the scatter plot shows.

Sorting

ScatterPlot applies no default sorting. You can pass sortBy to sort the data.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Option	What it changes
`colors`, `colorPalette`, `colorMapping`	Colors of the points. With `segmentBy`, each segment gets its own color.
`legend`	Whether the legend shows and where. With `segmentBy`, the legend lists the segments.
`dataLabels`	`visible` shows or hides the labels, which show the `attribute` value of each point. `style: "backplate"` adds a background behind them.
`xaxis`, `yaxis`	The X axis (`xAxisMeasure`) and the Y axis (`yAxisMeasure`). `visible`, `labelsEnabled`, `rotation`, and `name` set how the axis, its labels, and its name show. `min` and `max` set the axis range. `format: "inherit"` formats the axis labels with the measure format.
`grid`	`enabled` shows or hides the grid lines on both axes.
`zoomInsight`	`true` lets you zoom in along the X axis and pan while holding Shift.
`separators`	Thousands and decimal separators in the number format.

Limits

With segmentBy set, a scatter plot renders up to 10,000 data points. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { ScatterPlot } from "@gooddata/sdk-ui-charts";

<ScatterPlot
    xAxisMeasure={<measure>}
    yAxisMeasure={<measure>}
    attribute={<attribute>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { ScatterPlot } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <ScatterPlot
        xAxisMeasure={Md.$FranchiseFees}
        yAxisMeasure={Md.$FranchisedSales}
        attribute={Md.DateMonth.Short}
    />
</div>;

With clustering

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { ScatterPlot } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <ScatterPlot
        xAxisMeasure={Md.$FranchiseFees}
        yAxisMeasure={Md.$FranchisedSales}
        attribute={Md.DateMonth.Short}
        config={{
            clustering: {
                enabled: true,
                numberOfClusters: 3,
                threshold: 0.03,
            },
        }}
    />
</div>;

Props

Prop	Type	Required	Description	Inherited from
`attribute`	`AttributeOrPlaceholder`	No	Specify attribute whose values will be used to create data points.	`IScatterPlotBucketProps`
`backend`	`IAnalyticalBackend`	No	Analytical backend, from which the chart will obtain data to visualize If you do not specify instance of analytical backend using this prop, then you MUST have BackendProvider up in the component tree.	`IBucketChartProps`
`config`	`IChartConfig`	No	Configure chart’s behavior and appearance.	`ICommonChartProps`
`drillableItems`	`ExplicitDrill[]`	No	Configure drillability; e.g. which parts of the visualization can be interacted with.	`IVisualizationProps`
`ErrorComponent`	`ComponentType<IErrorProps>`	No	React component to display in the event when there is an error with either obtaining the data from backend or with the data itself.	`IVisualizationProps`
`execConfig`	`IExecutionConfig`	No	Execution configuration, will provide the execution with necessary config before initiating execution.	`ICommonChartProps`
`exportTitle`	`string`	No	Set title to use for exported files.	`IVisualizationProps`
`filters`	`NullableFiltersOrPlaceholders`	No	Specify filters to apply on the data to chart.	`IScatterPlotBucketProps`
`height`	`number`	No	Set height of the chart (in pixels).	`ICommonChartProps`
`LoadingComponent`	`ComponentType<ILoadingProps>`	No	React component to display while loading data from the backend.	`IVisualizationProps`
`locale`	`string`	No	Set Locale for visualization localization.	`IVisualizationProps`
`onDataView`	`OnDataView`	No	(Alpha) Called when the visualization loads a DataView, i.e. it receives data from the backend.	`IVisualizationCallbacks`
`onDrill`	`OnFiredDrillEvent`	No	Called when user triggers a drill on a visualization.	`IVisualizationCallbacks`
`onError`	`OnError`	No	Called when an error occurs while loading data for the visualization.	`IVisualizationCallbacks`
`onExportReady`	`OnExportReady`	No	Called when the visualization is ready to be exported.	`IVisualizationCallbacks`
`onLegendReady`	`OnLegendReady`	No	Called when legend is rendered.	`IChartCallbacks`
`onLoadingChanged`	`OnLoadingChanged`	No	Called when loading status of the visualization changes - vis starts or stops loading	`IVisualizationCallbacks`
`placeholdersResolutionContext`	`any`	No	Resolution context for composed placeholders.	`IScatterPlotBucketProps`
`segmentBy`	`AttributeOrPlaceholder`	No	Specify attribute whose values will be used to segment the data.	`IScatterPlotBucketProps`
`sortBy`	`SortsOrPlaceholders`	No	Specify how to sort the data to chart.	`IScatterPlotBucketProps`
`width`	`number`	No	Set width of the chart (in pixels).	`ICommonChartProps`
`workspace`	`string`	No	Identifier of analytical workspace, from which the chart will obtain data to visualize. If you do not specify workspace identifier, then you MUST have WorkspaceProvider up in the component tree.	`IBucketChartProps`
`xAxisMeasure`	`MeasureOrPlaceholder`	No	Specify measure which will be used to position data points on the X axis.	`IScatterPlotBucketProps`
`yAxisMeasure`	`MeasureOrPlaceholder`	No	Specify measure which will be used to position data points on the Y axis.	`IScatterPlotBucketProps`