Scatter Chart with Integrated Zoom Overlay

xy scatter point

This high-density scatter plot provides an analysis of 53,940 diamonds, illustrating the relationship between price and carat weight. The data is further categorized by clarity, using a color lookup table to differentiate grades. Distinct vertical clusters at round-number weights (e.g., 1.0ct) reveal significant price jumps, marking where consumer demand for specific milestones creates market premiums.

To maintain context during exploration, an overview chart is positioned above the main plot to display the entire dataset and indicate the current zoom level via a rectangular overlay. This is implemented efficiently by using an ImageFill; a screenshot of the main ChartXY is captured as a data URL and applied directly as the background fill style for the overview series.

const screenshotDataUrl = chart.engine.captureFrame(undefined, undefined, true)
const img = new Image();
img.src = screenshotDataUrl
const fill = new ImageFill({ source: img })
overlayChart.setSeriesBackgroundFillStyle(fill)

The background image of the overview chart is updated every time the browser window size changes.

The data used in this example: Tidyverse / Diamonds CSV.