Plotly is free for unlimited public use. Sign up for free!

Sensitive data? Upgrade to a paid plan

Show Sidebar Hide Sidebar
Node.js

Line and Scatter Plots in Nodejs

How to make line and scatter plots in nodejs. Seven examples of basic and colored line and scatter plots.

// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: "scatter"
};
var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: "scatter"
};
var data = [trace1, trace2];
var graphOptions = {filename: "basic-line", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

require('plotly')(username, api_key);

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];
var graphOptions = {filename: "line-scatter", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [52698, 43117],
  y: [53, 31],
  mode: "markers",
  name: "North America",
  text: ["United States", "Canada"],
  marker: {
    color: "rgb(164, 194, 244)",
    size: 12,
    line: {
      color: "white",
      width: 0.5
    }
  },
  type: "scatter"
};
var trace2 = {
  x: [39317, 37236, 35650, 30066, 29570, 27159, 23557, 21046, 18007],
  y: [33, 20, 13, 19, 27, 19, 49, 44, 38],
  mode: "markers",
  name: "Europe",
  text: ["Germany", "Britain", "France", "Spain", "Italy", "Czech Rep.", "Greece", "Poland"],
  marker: {
    color: "rgb(255, 217, 102)",
    size: 12,
    line: {
      color: "white",
      width: 0.5
    }
  },
  type: "scatter"
};
var trace3 = {
  x: [42952, 37037, 33106, 17478, 9813, 5253, 4692, 3899],
  y: [23, 42, 54, 89, 14, 99, 93, 70],
  mode: "markers",
  name: "Asia/Pacific",
  text: ["Australia", "Japan", "South Korea", "Malaysia", "China", "Indonesia", "Philippines", "India"],
  marker: {
    color: "rgb(234, 153, 153)",
    size: 12,
    line: {
      color: "white",
      width: 0.5
    }
  },
  type: "scatter"
};
var trace4 = {
  x: [19097, 18601, 15595, 13546, 12026, 7434, 5419],
  y: [43, 47, 56, 80, 86, 93, 80],
  mode: "markers",
  name: "Latin America",
  text: ["Chile", "Argentina", "Mexico", "Venezuela", "Venezuela", "El Salvador", "Bolivia"],
  marker: {
    color: "rgb(142, 124, 195)",
    size: 12,
    line: {
      color: "white",
      width: 0.5
    }
  },
  type: "scatter"
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
  title: "Quarter 1 Growth",
  xaxis: {
    title: "GDP per Capita",
    showgrid: false,
    zeroline: false
  },
  yaxis: {
    title: "Percent",
    showline: false
  }
};
var graphOptions = {layout: layout, filename: "line-style", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

require('plotly')(username, api_key);

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 3, 2, 3, 1],
  mode: "lines+markers",
  name: "'linear'",
  line: {shape: "linear"},
  type: "scatter"
};
var trace2 = {
  x: [1, 2, 3, 4, 5],
  y: [6, 8, 7, 8, 6],
  mode: "lines+markers",
  name: "'spline'",
  text: ["tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object", "tweak line smoothness<br>with 'smoothing' in line object"],
  line: {shape: "spline"},
  type: "scatter"
};
var trace3 = {
  x: [1, 2, 3, 4, 5],
  y: [11, 13, 12, 13, 11],
  mode: "lines+markers",
  name: "'vhv'",
  line: {shape: "vhv"},
  type: "scatter"
};
var trace4 = {
  x: [1, 2, 3, 4, 5],
  y: [16, 18, 17, 18, 16],
  mode: "lines+markers",
  name: "'hvh'",
  line: {shape: "hvh"},
  type: "scatter"
};
var trace5 = {
  x: [1, 2, 3, 4, 5],
  y: [21, 23, 22, 23, 21],
  mode: "lines+markers",
  name: "'vh'",
  line: {shape: "vh"},
  type: "scatter"
};
var trace6 = {
  x: [1, 2, 3, 4, 5],
  y: [26, 28, 27, 28, 26],
  mode: "lines+markers",
  name: "'hv'",
  line: {shape: "hv"},
  type: "scatter"
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6];
var layout = {legend: {
    y: 0.5,
    traceorder: "reversed",
    font: {size: 16},
    yref: "paper"
  }};
var graphOptions = {layout: layout, filename: "line-shapes", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});
Still need help?
Contact Us

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