Scatter Plots in JavaScript

How to make D3.js-based line and scatter plots in JavaScript. Examples of basic and colored line and scatter plots.

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Line and Scatter Plot

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);

Data Labels Hover

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 6, 3, 6, 1],
  mode: 'markers',
  type: 'scatter',
  name: 'Team A',
  text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
  marker: { size: 12 }
};

var trace2 = {
  x: [1.5, 2.5, 3.5, 4.5, 5.5],
  y: [4, 1, 7, 1, 4],
  mode: 'markers',
  type: 'scatter',
  name: 'Team B',
  text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'],
  marker: { size: 12 }
};

var data = [ trace1, trace2 ];

var layout = {
  xaxis: {
    range: [ 0.75, 5.25 ]
  },
  yaxis: {
    range: [0, 8]
  },
  title:'Data Labels Hover'
};

Plotly.newPlot('myDiv', data, layout);

Data Labels on The Plot

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 6, 3, 6, 1],
  mode: 'markers+text',
  type: 'scatter',
  name: 'Team A',
  text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
  textposition: 'top center',
  textfont: {
    family:  'Raleway, sans-serif'
  },
  marker: { size: 12 }
};

var trace2 = {
  x: [1.5, 2.5, 3.5, 4.5, 5.5],
  y: [4, 1, 7, 1, 4],
  mode: 'markers+text',
  type: 'scatter',
  name: 'Team B',
  text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'],
  textfont : {
    family:'Times New Roman'
  },
  textposition: 'bottom center',
  marker: { size: 12 }
};

var data = [ trace1, trace2 ];

var layout = {
  xaxis: {
    range: [ 0.75, 5.25 ]
  },
  yaxis: {
    range: [0, 8]
  },
  legend: {
    y: 0.5,
    yref: 'paper',
    font: {
      family: 'Arial, sans-serif',
      size: 20,
      color: 'grey',
    }
  },
  title:'Data Labels on the Plot'
};

Plotly.newPlot('myDiv', data, layout);

Scatter Plot with a Color Dimension

var trace1 = {
  y: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
  mode: 'markers',
  marker: {
    size: 40,
    color: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39]
  }
};

var data = [trace1];

var layout = {
  title: 'Scatter Plot with a Color Dimension'
};

Plotly.newPlot('myDiv', data, layout);

Grouped Scatter Plot

var trace1 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [24, 10, 9],
  name: 'Gold',
  type: 'scatter',
  mode: 'markers'
};

var trace2 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [13, 15, 12],
  name: 'Silver',
  type: 'scatter',
  mode: 'markers'
};

var trace3 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [11, 8, 12],
  name: 'Bronze',
  type: 'scatter',
  mode: 'markers'
};

var data = [trace1, trace2, trace3];

var layout = {
  scattermode: 'group',
  title: 'Grouped by Country',
  xaxis: {title: 'Country'},
  yaxis: {title: 'Medals'}
};

Plotly.newPlot('myDiv', data, layout);

Grouped Scatter Plot with Custom Scatter Gap

var trace1 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [24, 10, 9],
  name: 'Gold',
  type: 'scatter',
  mode: 'markers'
};

var trace2 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [13, 15, 12],
  name: 'Silver',
  type: 'scatter',
  mode: 'markers'
};

var trace3 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [11, 8, 12],
  name: 'Bronze',
  type: 'scatter',
  mode: 'markers'
};

var data = [trace1, trace2, trace3];

var layout = {
  scattermode: 'group',
  title: 'Grouped by Country',
  xaxis: {title: 'Country'},
  yaxis: {title: 'Medals'},
  scattergap: 0.7
};

Plotly.newPlot('myDiv', data, layout);