plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Bubble Charts in plotly.js

How to make a D3.js-based bubble chart in javascript. Examples of scatter charts whose markers have variable color, size, and symbols.

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    size: [40, 60, 80, 100]
  }
};

var data = [trace1];

var layout = {
  title: 'Marker Size',
  showlegend: false,
  height: 600,
  width: 600
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)',  'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],
    opacity: [1, 0.8, 0.6, 0.4],
    size: [40, 60, 80, 100]
  }
};

var data = [trace1];

var layout = {
  title: 'Marker Size and Color',
  showlegend: false,
  height: 600,
  width: 600
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  text: ['A
size: 40', 'B
size: 60', 'C
size: 80', 'D
size: 100'], mode: 'markers', marker: { color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)', 'rgb(44, 160, 101)', 'rgb(255, 65, 54)'], size: [40, 60, 80, 100] } }; var data = [trace1]; var layout = { title: 'Bubble Chart Hover Text', showlegend: false, height: 600, width: 600 }; Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  text: ['A
size: 40', 'B
size: 60', 'C
size: 80', 'D
size: 100'], mode: 'markers', marker: { size: [400, 600, 800, 1000], sizemode: 'area' } }; var trace2 = { x: [1, 2, 3, 4], y: [14, 15, 16, 17], text: ['A
size: 40
sixeref: 0.2', 'B
size: 60
sixeref: 0.2', 'C
size: 80
sixeref: 0.2', 'D
size: 100
sixeref: 0.2'], mode: 'markers', marker: { size: [400, 600, 800, 1000], //setting 'sizeref' to lower than 1 decreases the rendered size sizeref: 2, sizemode: 'area' } }; var trace3 = { x: [1, 2, 3, 4], y: [20, 21, 22, 23], text: ['A
size: 40
sixeref: 2', 'B
size: 60
sixeref: 2', 'C
size: 80
sixeref: 2', 'D
size: 100
sixeref: 2'], mode: 'markers', marker: { size: [400, 600, 800, 1000], //setting 'sizeref' to less than 1, increases the rendered marker sizes sizeref: 0.2, sizemode: 'area' } }; var data = [trace1, trace2, trace3]; var layout = { title: 'Bubble Chart Size Scaling', showlegend: false, height: 600, width: 600 }; Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    color: ['hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'],
    size: [12, 22, 32, 42],
    opacity: [0.6, 0.7, 0.8, 0.9]
  },
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [11, 12, 13, 14],
  mode: 'markers',
  marker: {
    color: 'rgb(31, 119, 180)',
    size: 18,
    symbol: ['circle', 'square', 'diamond', 'cross']
  },
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 13, 14, 15],
  mode: 'markers',
  marker: {
    size: 18,
    line: {
      color: ['rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120)'],
      width: [2, 2, 6, 2]
    }
  },
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

var layout = {showlegend: false};

Plotly.newPlot('myDiv', data, layout);
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.