Scatter plots or scatter charts are a powerful tool for data visualization. Using scatter plot examples, we will explain:

  • When your data is appropriate for visualizing in scatter format

  • Best practices for formatting and styling scatter plots

  • Additional tips to make the most of your scatter plots
    Ready to get your scatter(ed) thoughts in order?

Scatter Plot Examples

Scatter plot example

What is a scatter plot?

A scatter plot is a chart with points that show the relationship between two or more sets of data. The data is plotted on the graph as Cartesian coordinates, also known as data on an XY scale.

Are you’re asking yourself, “Is there a relationship between one aspect of my data and another?” Well, scatter plot is probably the right chart for you.

One caveat before we share scatter plot examples: "Correlation does not imply causality." This means that your chart may show a trend or relationship. However, outside factors may be causing this pattern. Or, it might just be a coincidence. So scatter plots can provide clues to the data, but should not be the final word in showing that one variable causes another.

Best Practices

There are some data visualization tips to keep in mind when employing a scatter plot.

Scatter plot best practices

When to Use Scatter Plots

Scatter charts are useful to detect groupings or patterns among many data points, as long as you have two variables. For example, weight and age among a population are two variables in a data set. If you have only one variable, a line chart makes more sense.

Styling Scatter Plot Charts

Not only can you style the color and transparency levels of your scatter markers, you can also change the marker shapes. ZingChart provides over thirty markers for users to choose from, including triangles, diamonds, stars, gears, and more.

We also support custom markers, where users provide their own images. This marker customization allows you to add emphasis to a specific data set or allow for data differentiation.

Additional Scatter Plot Tips

The most commonly used scatter plot scales are linear, logarithmic, and time-series scales. You can also customize and/or incorporate value boxes, tooltips, and a legend to provide further clarification about your data. Read our Scatter Plots documentation for more information on this chart type.

Scatter Plot Examples

Scatter Plot with “Line of Best Fit” Trendline

A trend line is also known as a line of best fit. There are two types of trend lines:

  • Slope: a line of best fit in which the line stretches across the least number of squares on your chart

  • Y Intercept: a trend line that crosses the Y axis.

How to Add a Trendline

The trendline in the chart above was created with the easy-to-use .drawTrendline() method made available in our jQuery wrapper. Don’t forget, you can also calculate your own trendlines and use the ZingChart API to add them to your charts.

Scatter Plot with Annotations

Annotations can help draw users’ attention to the patterns in your data. Annotation options for this chart type in our JavaScript charting library include:

  • Value boxes

  • Labels

  • Arrows

In the example above, we’ve created a static annotation using a standard ZingChart arrow positioned with x and y coordinates. If your project requires dynamically placed annotations, use the ZingChart annotations module or the ZingChart API to add notes or objects to your chart on the fly.

Interactive Scatter Plot

Interactive scatter plots may good idea in certain cases. For example, a crosshair and plot labels can be useful for differentiating data points if they are spaced really close together.

Giving users the ability toggle datasets on and off with the legend can also help them more easily navigate your visualization. The following scatter plot example showcases these two interactive options.

This chart makes use of the crosshair-x and plot-label objects. The label text uses the token %tto referenceplot-text and %v to reference plot-value.

The series toggle function of the legend is actually default behavior in the ZingChart library and requires no setup. If the user needs an even better look at the data, they can click and drag to zoom in. Adding this feature to the chart was as simple as setting the zooming attribute to true inside of the scale-x object!

Scatter PLUS

bubble, for bubble charts

Take your scatter plot to the next level by making it a bubble chart. You can do this by adding a third series to specify individual point sizes or ranges. Details on this chart type are available in:

Don’t Scatter Just Yet!

Ready to make your own scatter plot? This chart type comes standard in every ZingChart package. Try the library today.