Basic Scatter Plot — Apache ECharts

A fundamental 2D scatter plot that displays the relationship between two numeric variables by plotting points on a Cartesian coordinate system. This visualization is essential for exploring correlations, identifying patterns, detecting outliers, and understanding the distribution of paired data points.

Basic Scatter Plot rendered with Apache ECharts

Renders

JavaScript source (Apache ECharts)

// anyplot.ai
// scatter-basic: Basic Scatter Plot
// Library: echarts 5.5.1 | JavaScript 22.23.0
// Quality: 88/100 | Updated: 2026-06-25

//# anyplot-orientation: landscape

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic LCG) -----------------------------------
// Health study: height (cm) vs weight (kg), 120 participants, r ≈ 0.7
let seed = 42;
const rng = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; };
const randn = () => {
  const u = rng() + 1e-10;
  const v = rng();
  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
};

const n = 120;
const heightMean = 170, heightStd = 10;
const weightMean = 70, weightStd = 12, r = 0.7;
const points = [];
for (let i = 0; i < n; i++) {
  const h = heightMean + randn() * heightStd;
  const noise = randn() * weightStd * Math.sqrt(1 - r * r);
  const w = weightMean + r * (weightStd / heightStd) * (h - heightMean) + noise;
  points.push([+h.toFixed(1), +w.toFixed(1)]);
}

// Trend line endpoints from population parameters (slope = r·σy/σx)
const slope = r * (weightStd / heightStd);
const intercept = weightMean - slope * heightMean;

// --- Init -------------------------------------------------------------------
const chart = echarts.init(document.getElementById("container"));

// --- Option -----------------------------------------------------------------
chart.setOption({
  animation: false,
  color: t.palette,
  backgroundColor: "transparent",
  title: {
    text: "scatter-basic · javascript · echarts · anyplot.ai",
    left: "center",
    top: 24,
    textStyle: { color: t.ink, fontSize: 22, fontWeight: "bold" },
  },
  tooltip: {
    trigger: "item",
    formatter: (p) => `Height: ${p.value[0]} cm<br/>Weight: ${p.value[1]} kg`,
    backgroundColor: t.elevatedBg,
    borderColor: t.grid,
    textStyle: { color: t.ink, fontSize: 14 },
  },
  // borderWidth: 0 removes the default 1px grid box — leaves only L-shaped axes
  grid: { left: 110, right: 70, top: 90, bottom: 90, borderWidth: 0 },
  xAxis: {
    type: "value",
    min: 140,
    max: 205,
    name: "Height (cm)",
    nameLocation: "middle",
    nameGap: 52,
    nameTextStyle: { color: t.inkSoft, fontSize: 16, fontWeight: "normal" },
    axisLabel: { color: t.inkSoft, fontSize: 14 },
    axisLine: { lineStyle: { color: t.inkSoft } },
    axisTick: { lineStyle: { color: t.inkSoft } },
    splitLine: { lineStyle: { color: t.grid } },
  },
  yAxis: {
    type: "value",
    min: 35,
    max: 100,
    name: "Weight (kg)",
    nameLocation: "middle",
    nameRotate: 90,
    nameGap: 68,
    nameTextStyle: { color: t.inkSoft, fontSize: 16, fontWeight: "normal" },
    axisLabel: { color: t.inkSoft, fontSize: 14 },
    axisLine: { lineStyle: { color: t.inkSoft } },
    axisTick: { lineStyle: { color: t.inkSoft } },
    splitLine: { lineStyle: { color: t.grid } },
  },
  series: [
    {
      type: "scatter",
      data: points,
      symbolSize: 14,
      itemStyle: {
        color: t.palette[0],
        opacity: 0.65,
        borderColor: t.pageBg,
        borderWidth: 1,
      },
      // emphasis + blur: focused points enlarge, unfocused dim — idiomatic ECharts
      emphasis: {
        scale: 1.4,
        itemStyle: { opacity: 1, borderWidth: 2 },
      },
      blur: {
        itemStyle: { opacity: 0.25 },
      },
      // markLine: ECharts-native annotation that overlays the regression line
      markLine: {
        silent: true,
        symbol: "none",
        lineStyle: { color: t.palette[0], opacity: 0.45, width: 2.5, type: "dashed" },
        label: {
          show: true,
          formatter: "r ≈ 0.7",
          position: "insideEndTop",
          color: t.inkSoft,
          fontSize: 13,
        },
        data: [
          [
            { coord: [140, +(intercept + slope * 140).toFixed(1)] },
            { coord: [205, +(intercept + slope * 205).toFixed(1)] },
          ],
        ],
      },
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/scatter-basic/echarts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "scatter-basic",
  "language": "javascript",
  "library": "echarts",
  "page": "https://anyplot.ai/scatter-basic/javascript/echarts",
  "hub": "https://anyplot.ai/scatter-basic",
  "code_json": "https://api.anyplot.ai/specs/scatter-basic/echarts/code",
  "spec_json": "https://api.anyplot.ai/specs/scatter-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/scatter-basic/javascript/echarts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/scatter-basic/javascript/echarts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/scatter-basic/javascript/echarts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/scatter-basic/javascript/echarts/plot-dark.html",
  "quality_score": 88.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Scatter Plot on anyplot.ai.

Other implementations