Scatter Chart

Display distribution and correlation analysis with customizable scatter plots and bubble charts.

Loading chart...

Installation

npm

npx @galaxy-stack/nebula-cli@latest add scatter-chart

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add scatter-chart

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add scatter-chart

bun

bunx @galaxy-stack/nebula-cli@latest add scatter-chart

Dependencies

This component automatically installs the following dependencies:

• Vue: vue-echarts@^7.0.3, echarts@^5.5.1
• React: echarts-for-react@^3.0.2, echarts@^5.5.1
• Angular: ngx-echarts@^18.0.0, echarts@^5.5.1
• React Native: @wuba/react-native-echarts@^3.0.1, echarts@^5.5.1, @shopify/react-native-skia@^1.6.4
• Flutter: fl_chart@^0.68.0

Usage

Basic Scatter Chart

Vue

<script setup lang="ts">
import { ScatterChart } from '@/components/ui/charts'

const scatterData = {
  labels: ['Dataset'],
  datasets: [{
    label: 'Sales vs Revenue',
    data: [
      [12, 45],
      [19, 88],
      [25, 68],
      [33, 92],
      [42, 105]
    ],
    color: '#3b82f6'
  }]
}
</script>

<template>
  <ScatterChart
    :data="scatterData"
    :height="400"
    xAxisLabel="Sales (units)"
    yAxisLabel="Revenue ($K)"
  />
</template>

React

import { ScatterChart } from "@/components/ui/charts"

const scatterData = {
  labels: ['Dataset'],
  datasets: [{
    label: 'Sales vs Revenue',
    data: [
      [12, 45],
      [19, 88],
      [25, 68],
      [33, 92],
      [42, 105]
    ],
    color: '#3b82f6'
  }]
}

export default function App() {
  return (
    <ScatterChart
      data={scatterData}
      height={400}
      xAxisLabel="Sales (units)"
      yAxisLabel="Revenue ($K)"
    />
  )
}

Multiple Datasets

<script setup lang="ts">
const data = {
  labels: ['Comparison'],
  datasets: [
    {
      label: 'Product A',
      data: [[12, 45], [19, 88], [25, 68], [33, 92]],
      color: '#3b82f6'
    },
    {
      label: 'Product B',
      data: [[15, 52], [22, 75], [28, 82], [35, 98]],
      color: '#10b981'
    }
  ]
}
</script>

<template>
  <ScatterChart :data="data" :height="400" />
</template>

Bubble Chart (with Size)

<script setup lang="ts">
const bubbleData = {
  labels: ['Metrics'],
  datasets: [{
    label: 'Market Share',
    // Format: [x, y, size]
    data: [
      [12, 45, 50],
      [19, 88, 120],
      [25, 68, 80],
      [33, 92, 150]
    ],
    color: '#8b5cf6'
  }]
}
</script>

<template>
  <ScatterChart
    :data="bubbleData"
    :height="400"
    :symbolSize="10"
  />
</template>

With Object Data Format

<script setup lang="ts">
const objectData = {
  labels: ['Dataset'],
  datasets: [{
    label: 'Performance',
    data: [
      { x: 10, y: 45 },
      { x: 20, y: 75 },
      { x: 30, y: 68 },
      { x: 40, y: 92 }
    ],
    color: '#f59e0b'
  }]
}
</script>

<template>
  <ScatterChart :data="objectData" :height="400" />
</template>

Dark Theme

<template>
  <div class="dark">
    <ScatterChart
      :data="data"
      :height="400"
      theme="dark"
      class="bg-gray-900 rounded-lg p-4"
    />
  </div>
</template>

API Reference

Props

Prop	Type	Default	Description
data	ChartData	required	Chart data with x,y coordinates
height	number	300	Chart height in pixels
width	number | string	'100%'	Chart width
theme	'light' | 'dark'	'light'	Color theme
legend	boolean	true	Show/hide legend
legendPosition	'top' | 'bottom' | 'left' | 'right'	'top'	Legend position
symbolSize	number	10	Size of scatter points
opacity	number	0.8	Point opacity (0-1)
xAxisLabel	string	-	X-axis label text
yAxisLabel	string	-	Y-axis label text
loading	boolean	false	Show loading state
emptyText	string	'No data available'	Empty state message

Data Format

Scatter Chart supports multiple data formats:

1. Array Format [x, y]

data: [
  [12, 45],
  [19, 88],
  [25, 68]
]

2. Array with Size [x, y, size]

For bubble charts:

data: [
  [12, 45, 50],    // size: 50
  [19, 88, 120],   // size: 120
  [25, 68, 80]     // size: 80
]

3. Object Format {x, y}

data: [
  { x: 12, y: 45 },
  { x: 19, y: 88 },
  { x: 25, y: 68 }
]

4. Object with Value {x, y, value}

data: [
  { x: 12, y: 45, value: 50 },
  { x: 19, y: 88, value: 120 }
]

Use Cases

1. Correlation Analysis

Analyze relationship between two variables:

const correlationData = {
  labels: ['Correlation'],
  datasets: [{
    label: 'Study Hours vs Test Score',
    data: [
      [2, 65], [3, 72], [4, 78], [5, 85],
      [6, 88], [7, 92], [8, 95]
    ],
    color: '#3b82f6'
  }]
}

2. Cluster Analysis

Visualize data clusters:

const clusterData = {
  labels: ['Clusters'],
  datasets: [
    {
      label: 'Cluster A',
      data: [[12, 45], [14, 48], [16, 50]],
      color: '#3b82f6'
    },
    {
      label: 'Cluster B',
      data: [[25, 75], [27, 78], [29, 80]],
      color: '#10b981'
    }
  ]
}

3. Market Analysis

Compare product positioning:

const marketData = {
  labels: ['Products'],
  datasets: [{
    label: 'Price vs Quality',
    data: [
      [50, 7.5, 100],  // [price, quality, market share]
      [75, 8.2, 150],
      [100, 9.0, 200]
    ],
    color: '#8b5cf6'
  }]
}

Performance Tips

1. Limit data points: Keep points under 1000 for smooth performance
2. Use memoization: Memoize data that doesn't change frequently
3. Optimize rendering: Use useMemo (React) or computed (Vue)
4. Reduce symbol size: Smaller symbols render faster on mobile

Browser/Platform Support

Platform	Support	Notes
Chrome 90+	✅ Full	Recommended
Firefox 88+	✅ Full
Safari 14+	✅ Full
Edge 90+	✅ Full
iOS 14+	✅ Full	Touch optimized
Android 10+	✅ Full	Touch optimized

Related Components

• Line Chart - Display trends over time
• Bar Chart - Compare categorical values
• Radar Chart - Multi-dimensional comparison

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)