ScatterChart withLegend prop displays legend with hover highlighting
Set the withLegend prop to display the chart legend. When one of the items in the legend is hovered, the corresponding data series is highlighted in the chart.
charts/scatter-chart
16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
ScatterChart legendProps passes options to recharts Legend component
Use the legendProps prop to pass props down to the recharts Legend component. For example, setting legendProps={{ verticalAlign: 'bottom', height: 50 }} will render the legend at the bottom of the chart and set its height to 50px.
ScatterChart xAxisProps and yAxisProps customize axis behavior
Use xAxisProps and yAxisProps to pass props down to the recharts XAxis and YAxis components. These props can be used to change the orientation of the axis.
ScatterChart withRightYAxis displays secondary Y axis on right side
Set the withRightYAxis prop to display an additional Y axis on the right side of the chart. You can pass props down to the recharts YAxis component with the rightYAxisProps prop. Assign a label to the right Y axis with the rightYAxisLabel prop. Bind data series to the right Y axis by setting yAxisId: 'right' in the data object. Series without yAxisId are bound to the left Y axis. Both axes use the same dataKey.y value, but their scales are calculated independently from the series assigned to them.
ScatterChart valueFormat prop formats tooltip and axis values
Use the valueFormat prop to format values in the tooltip and axis ticks. It accepts a function that takes a number value as an argument and returns a formatted value, or an object with x and y keys to format x and y values separately.
ScatterChart pointLabels prop displays labels on data points
Set the pointLabels prop to 'x' or 'y' to display labels on data points for the corresponding axis.
ScatterChart CSS variables for grid and text colors
Use the --chart-grid-color and --chart-text-color CSS variables to change colors of grid lines and text within the chart. With CSS modules, you can change colors depending on color scheme.
ScatterChart gridColor and textColor props override CSS variables
If your application has only one color scheme, you can use the gridColor and textColor props instead of CSS variables. Example: <ScatterChart h={350} data={data} dataKey={{ x: 'age', y: 'BMI' }} gridColor="gray.5" textColor="gray.9" />
ScatterChart strokeDasharray controls grid and cursor line dashes
Set the strokeDasharray prop to control the stroke dash array of the grid and cursor lines. The value represents the lengths of alternating dashes and gaps. For example, strokeDasharray="10 5" will render a dashed line with 10px dashes and 5px gaps.
ScatterChart unit prop displays unit label on axis and tooltip
Set the unit prop to render a unit label next to the axis ticks and tooltip values.
ScatterChart labels prop customizes tooltip labels
Use the labels prop to customize labels displayed in the tooltip.
ScatterChart custom tooltip with tooltipProps.content
Use tooltipProps.content to pass a custom tooltip renderer to the recharts Tooltip component.
ScatterChart withTooltip={false} removes tooltip and interactions
Set withTooltip={false} to remove the tooltip. This also removes the cursor line and disables interactions with the chart.
ScatterChart tooltipAnimationDuration animates tooltip movement
By default, tooltip animation is disabled. To enable it, set the tooltipAnimationDuration prop to a number of milliseconds to animate the tooltip position change.
ScatterChart dots customization with recharts Scatter props
You can use any shape as a dot by passing props to the recharts Scatter component.
ScatterChart referenceLines prop renders reference lines
Use the referenceLines prop to render reference lines. Reference lines are always rendered behind the chart.