Bubble Chart

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

The BubbleChart component visualizes three variables by mapping data to x/y positions and bubble size, ideal for displaying multi-dimensional datasets.

Basic Usage

Props

PropTypeDefaultDescription
dataT[]RequiredArray of data points for the chart. Each element represents a data point.
heightnumberRequiredHeight of the chart in pixels.
categoriesRecord<string, BulletLegendItemInterface>RequiredSeries 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.
categoryKeykeyof TRequiredKey to access the category from the data item.
xAccessorNumericAccessor<T>undefinedAccessor for x value (index, property, etc). If not provided, defaults to d.beakLength.
yAccessorNumericAccessor<T>undefinedAccessor for y value. If not provided, defaults to d.flipperLength.
sizeAccessorNumericAccessor<T>undefinedAccessor for bubble size. If not provided, defaults to 1.
xLabelstringundefinedOptional label for the x-axis.
yLabelstringundefinedOptional label for the y-axis.
padding{ top: number; right: number; bottom: number; left: number; }undefinedOptional padding for the chart (top, right, bottom, left).
xFormatteraxisFormatterundefinedFormats X-axis labels. (tick, i, ticks) => string where tick can be a number or Date.
yFormatteraxisFormatterundefinedFormats Y-axis labels. (tick, i, ticks) => string where tick can be a number or Date.
labelPositionPositionPosition.BottomLabel position for bubbles.
sizeRange[number, number][1, 20]Range for bubble sizes.
opacitynumberundefinedOpacity for bubbles.
xExplicitTicks(number | string | Date)[]undefinedExplicit tick values for x axis.
minMaxTicksOnlybooleanfalseOnly show min/max ticks for x axis.
xNumTicksnumberundefinedDesired number of ticks on the x-axis.
yNumTicksnumberundefinedDesired number of ticks on the y-axis.
hideLegendbooleanfalseIf true, hides the chart legend.
hideTooltipbooleanfalseIf true, hides the tooltip.
legendPositionLegendPositionundefinedPosition of the legend (see LegendPosition).
legendStyleRecord<string, string>undefinedOptional inline CSS styles for the legend container.
sizeOptionsSizeOptionsundefinedOptions for controlling bubble sizes (minRadius, maxRadius).
xDomainLinebooleanfalseShow domain (axis) line on the x-axis.
yDomainLinebooleanfalseShow domain (axis) line on the y-axis.
xTickLinebooleanfalseShow tick lines on the x-axis.
yTickLinebooleanfalseShow tick lines on the y-axis.
xGridLinebooleanfalseShow grid lines on the x-axis.
yGridLinebooleanfalseShow grid lines on the y-axis.
hideXAxisbooleanfalseIf true, hides the x-axis.
hideYAxisbooleanfalseIf true, hides the y-axis.
crosshairConfigCrosshairConfigundefinedCrosshair configuration for customizing the crosshair line.
xAxisConfigAxisConfigundefinedAxis configuration for customizing the appearance of the x-axis.
yAxisConfigAxisConfigundefinedAxis configuration for customizing the appearance of the y-axis.
tooltipTitleFormatter(data: T) => string | numberundefinedCustom formatter for tooltip titles.
tooltipTooltipConfigundefinedTooltip configuration (hideDelay, showDelay, followCursor).
durationnumberundefinedAnimation duration in milliseconds.

Data Format

The data for your Vue charts 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.