Skip to main content

Bubble Chart

Bubble charts are scatter charts where each point has a size representing a third value.

import {BubbleChartComponent} from "@visuallyjs/browser-ui-react"

export default function MyChart() {

  const data = [
    {x:10,y:10,r:5},
     {x:20,y:20,r:10},
     {x:15,y:25,r:7}
]
  
  const options = {
  title: {
    text: "Fat/sugar consumption vs obesity"
  },
  series: [
    {
      xAxisField: "sugar",
      yAxisField: "fat",
      valueField: "obesity",
      color: "#456"
    }
  ]
}    
    
  return <BubbleChartComponent options={options} className="my-chart" data={data}/>
}

Axis origin​

By default, the scatter chart will compute min/max values for each axis based upon the dataset, and the minimum value for each axis is not always 0 - you can see this in the chart above, where the minimum on the Y axis is 0, but the minimum on the X axis is 60.

This arrangement is aimed at providing the best visual layout for the user. In some cases, though, you might want to specify the minimum value for one or both axes - either in order to ensure that the user has a clear understanding of the magnitude of the values, or because one or more of your data points is placed on an axis and you wish to improve the clarity - for example:


In this case you can specify min for your axes:

Specifying Marker​

By default, bubble charts use circular markers for each data point. You can customize the marker's appearance using various options in the ChartSeriesOptions.

Marker Type​

You can change the shape of the marker using the markerType option. For example, to use a square marker:

import {BubbleChartComponent} from "@visuallyjs/browser-ui-react"

export default function MyChart() {

  const data = ...
  
  const options = {
  series: [
    {
      xAxisField: "sugar",
      yAxisField: "fat",
      valueField: "obesity",
      markerType: "square"
    }
  ]
}    
    
  return <BubbleChartComponent options={options} className="my-chart"/>
}

Valid options are "circle" (the default), "square" and "cross".

Marker Size​

In a bubble chart, markerSize is ignored, as the size of each marker is determined by the valueField of each data point. You can, however, control the range of sizes that the bubbles can take by using the minPointSize and maxPointSize options.

The default value for minPointSize is 10. There is no default for maxPointSize.

import {BubbleChartComponent} from "@visuallyjs/browser-ui-react"

export default function MyChart() {

  const data = ...
  
  const options = {
  series: [
    {
      xAxisField: "sugar",
      yAxisField: "fat",
      valueField: "obesity",
      minPointSize: 5,
      maxPointSize: 30
    }
  ]
}    
    
  return <BubbleChartComponent options={options} className="my-chart"/>
}

Custom Marker Template​

For full control over the marker's appearance, you can provide an SVG template string using the marker option:

import {BubbleChartComponent} from "@visuallyjs/browser-ui-react"

export default function MyChart() {

  const data = ...
  
  const options = {
  series: [
    {
      xAxisField: "sugar",
      yAxisField: "fat",
      valueField: "obesity",
      marker: <svg:svg width='18' height='18' viewBox='0 0 6 6'>
<svg:circle cx='3' cy='3' r='2.5' fill='yellow' stroke='black' stroke-width='0.2' />
<svg:circle cx='2' cy='2.2' r='0.3' stroke='black' fill='yellow'/>
<svg:circle cx='4' cy='2.2' r='0.3' stroke='black' fill='yellow' />
<svg:path d='M 1.8 3.8 Q 3 5 4.2 3.8' fill='none' stroke='black' stroke-width='0.3' stroke-linecap='round' />
</svg:svg>
    }
  ]
}    
    
  return <BubbleChartComponent options={options} className="my-chart"/>
}

This template must be in VisuallyJs's template syntax.

Options​

BubbleChartOptions
Options for a bubble chart.
NameTypeDescription
axisFont?FontSpecSpec for the font to use for all text on the axes.
axisLineSize?numberThe width to use if showing a line marking value/category axes. By default, axis lines are not painted.
colorGenerator?ColorGeneratorOptional function to call in order to establish the color to be used for each series
cornerRadius?numberWhen rounding bar/column corners, use this radius. Defaults to 5 pixels.
data?Array<ObjectData>Optional data to load into the chart.
dataSource?DataSourceOptional data source (of type DataSource, meaning both VisuallyJsModel and Selection are supported) from which to retrieve data to load into the chart.
dataSourceFilter?ChartModelFilterWhen you provide dataSource, you can also provide a filter which accepts or rejects specific nodes/groups in the data source.
defaultColor?stringOptional color to use for every series. Overrides any colorGenerator.
emptyMessage?stringMessage to display when the chart has no data. Defaults to "No data".
grouped?booleanIf true, the data will be grouped, if the chart type supports it (eg Bar/Column).
groupField?stringThe name of the field that identifies which group a data point belongs to. Defaults to group.
height?numberHeight for the chart. If omitted, height is computed from the width of the chart's container
legend?boolean | LegendSpecEither a boolean true/false, indicating the legend should be shown/hidden, or a spec for a legend.
legendPadding?numberWhen the legend is not floating, this number defines how much whitespace to leave around it.
maximumMarkerSize?numberMaximum allowed size for a marker. Defaults to 50 pixels. Set to Infinity to have no maximum (this can have unpleasant UI side effects with some datasets)
maxLabelSize?numberThe maximum size a category label can be as a ratio of the chart's overall size. Category labels are rotated to 45 degrees automatically when they start to overlap each other, but if the labels are long strings then there is a chance they'll use up too much of the available chart space. This value (whose default is 0.2), specifies a hard limit for label size, to avoid that situation. In a chart whose category axis is the X axis, this is applied relative to the height of the chart, and in a chart whose category axis is the Y axis, it's applied relative to the width.
maxPointSize?numberThe maximum size (in pixels) for a bubble. No default.
minimumMarkerSize?numberMinimum allowed size for a marker. Defaults to 8 pixels. Set to -Infinity to have no minimum (this can have unpleasant UI side effects with some datasets)
minPointSize?numberThe minimum size (in pixels) for a bubble. Defaults to 10.
resizeObserver?booleanDefaults to true, meaning the chart will redraw when its container element resizes.
roundCorners?booleanWhether or not to round the corners of bars/columns. Defaults to true
seriesArray<BubbleChartSeriesOptions>An array of bubble chart series options.
style?ChartStyleOptionsStyles for legend and grid.
subtitle?SubtitleSpecSubtitle for the chart.
title?ChartTitleSpecTitle for the chart.
titlePadding?numberPadding to leave underneath the title
tooltip?TooltipOptionsOptions for the info tooltip.
url?stringOptional URL from which to retrieve data to load into the chart
width?numberWidth for the chart. If omitted, width is computed from the width of the chart's container
xAxis?ValueAxisDefinitionConfiguration for the X axis.
yAxis?ValueAxisDefinitionConfiguration for the Y axis.
yAxisPadding?numberHow much padding to leave between the y axes decoration and the chart content area.
zoom?{
  enabled:boolean,
  initialValue:number,
  range:[number, number]
}		Optional zoom configuration.

CSS Classes​

ClassDescription
vjs-bubble-chart-pointAdded to each point in a bubble chart
vjs-chart-pointAdded to each point in a scatter/bubble chart
vjs-chart-point-hit-areaAdded to the hit area elements that represent each data point. These are to assist users in selecting data points which are small.