Bubble Chart

Learn how to implement and customize Bubble Charts in your Nuxt application.

The BubbleChart or Scatter Plot component provides a flexible and customizable way to visualize three-dimensional data relationships using positioned circles, where x and y coordinates represent two variables and bubble size represents a third dimension.

Basic Usage

<script lang="ts" setup>
const bubbleChartData = [
  /* ... more data ... */
  {
    id: 'Drama-Feb',
    title: 'Drama',
    month: 2,
    viewingHours: 2.9,
    subscribers: 48,
  },
  {
    id: 'Drama-Mar',
    title: 'Drama',
    month: 3,
    viewingHours: 3.1,
    subscribers: 52,
  },
  /* ... */
  {
    id: 'Horror-Sep',
    title: 'Horror',
    month: 9,
    viewingHours: 1.6,
    subscribers: 27,
  },
  {
    id: 'Horror-Oct',
    title: 'Horror',
    month: 10,
    viewingHours: 2.3,
    subscribers: 39,
  },
]

const categories1 = {
  Drama: { name: 'Drama', color: 'var(--color-red-400)' },
  'Action/Thriller': {
    name: 'Action/Thriller',
    color: 'var(--color-orange-400)',
  },
  Comedy: { name: 'Comedy', color: 'var(--color-yellow-400)' },
  Documentary: { name: 'Documentary', color: 'var(--color-blue-400)' },
  Romance: { name: 'Romance', color: 'var(--color-pink-400)' },
  'Sci-Fi/Fantasy': {
    name: 'Sci-Fi/Fantasy',
    color: 'var(--color-green-400)',
  },
  Horror: { name: 'Horror', color: 'var(--color-purple-400)' },
}

const monthNames = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
]

function formatNumber(tick: number | Date): string {
  return typeof tick === 'number' ? tick.toFixed(1) : String(tick)
}

const xAccessor1 = (d: any) => d.month
const yAccessor1 = (d: any) => d.viewingHours
const sizeAccessor1 = (d: any) => d.subscribers
</script>

<template>
  <BubbleChart
    :data="bubbleChartData"
    :height="230"
    :categories="categories1"
    category-key="title"
    :x-accessor="xAccessor1"
    :y-accessor="yAccessor1"
    :y-domain-line="false"
    :size-accessor="sizeAccessor1"
    :legend-position="LegendPosition.BottomRight"
    :x-num-ticks="12"
    :x-formatter="(tick: number) => monthNames[tick - 1] ?? String(tick)"
    :y-formatter="(v: number | Date) => `${formatNumber(v)}B hrs`"
  />
</template>

Star

Props

Prop	Type	Default	Description
`data`	`T[]`	Required	Array of data points for the chart. Each element represents a data point.
`height`	`number`	Required	Height of the chart in pixels.
`categories`	`Record<string, BulletLegendItemInterface>`	Required	Series configuration: name and color for each data key. Each unique value in your data's categoryKey field must have a corresponding entry with a color.
`categoryKey`	`keyof T`	Required	Key to access the category from the data item.
`xAccessor`	`NumericAccessor<T>`	`undefined`	Accessor for x value (index, property, etc). If not provided, defaults to d.beakLength.
`yAccessor`	`NumericAccessor<T>`	`undefined`	Accessor for y value. If not provided, defaults to d.flipperLength.
`sizeAccessor`	`NumericAccessor<T>`	`undefined`	Accessor for bubble size. If not provided, defaults to 1.
`xLabel`	`string`	`undefined`	Optional label for the x-axis.
`yLabel`	`string`	`undefined`	Optional label for the y-axis.
`padding`	`{ top: number; right: number; bottom: number; left: number; }`	`undefined`	Optional padding for the chart (top, right, bottom, left).
`xFormatter`	`axisFormatter`	`undefined`	Formats X-axis labels. `(tick, i, ticks) => string` where tick can be a number or Date.
`yFormatter`	`axisFormatter`	`undefined`	Formats Y-axis labels. `(tick, i, ticks) => string` where tick can be a number or Date.
`labelPosition`	`Position`	`Position.Bottom`	Label position for bubbles.
`sizeRange`	`[number, number]`	`[1, 20]`	Range for bubble sizes.
`opacity`	`number`	`undefined`	Opacity for bubbles.
`xExplicitTicks`	`(number	string	Date)`
`minMaxTicksOnly`	`boolean`	`false`	Only show min/max ticks for x axis.
`xNumTicks`	`number`	`undefined`	Desired number of ticks on the x-axis.
`yNumTicks`	`number`	`undefined`	Desired number of ticks on the y-axis.
`hideLegend`	`boolean`	`false`	If true, hides the chart legend.
`hideTooltip`	`boolean`	`false`	If true, hides the tooltip.
`legendPosition`	`LegendPosition`	`undefined`	Position of the legend (see LegendPosition).
`legendStyle`	`Record<string, string>`	`undefined`	Optional inline CSS styles for the legend container.
`sizeOptions`	`SizeOptions`	`undefined`	Options for controlling bubble sizes (minRadius, maxRadius).
`xDomainLine`	`boolean`	`false`	Show domain (axis) line on the x-axis.
`yDomainLine`	`boolean`	`false`	Show domain (axis) line on the y-axis.
`xTickLine`	`boolean`	`false`	Show tick lines on the x-axis.
`yTickLine`	`boolean`	`false`	Show tick lines on the y-axis.
`xGridLine`	`boolean`	`false`	Show grid lines on the x-axis.
`yGridLine`	`boolean`	`false`	Show grid lines on the y-axis.
`hideXAxis`	`boolean`	`false`	If true, hides the x-axis.
`hideYAxis`	`boolean`	`false`	If true, hides the y-axis.
`crosshairConfig`	`CrosshairConfig`	`undefined`	Crosshair configuration for customizing the crosshair line.
`xAxisConfig`	`AxisConfig`	`undefined`	Axis configuration for customizing the appearance of the x-axis.
`yAxisConfig`	`AxisConfig`	`undefined`	Axis configuration for customizing the appearance of the y-axis.

Data Format

The data should be an array of objects where each object represents a bubble.

types.ts

interface BubbleChartData {
  id: string
  title: string
  month: number
  viewingHours: number
  subscribers: number
  [key: string]: any
}

Categories Format

Categories define the visual appearance and metadata for each bubble series.

types.ts

interface BubbleCategory {
  name: string
  color: string
}

interface BubbleCategories {
  [key: string]: BubbleCategory
}

Donut Chart

Implement circular data visualizations with the Donut Chart component.

Gantt Charts

A Gantt Chart or timeline that displays a list of events in chronological order.