Bar Charts in Nodejs

How to make a bar chart in nodejs. Seven examples of grouped, stacked, overlaid, and colored bar charts.

Basic Bar Chart

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

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

var data = [
  {
    x: ["giraffes", "orangutans", "monkeys"],
    y: [20, 14, 23],
    type: "bar"
  }
];
var graphOptions = {filename: "basic-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Grouped Bar Chart

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

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

var trace1 = {
  x: ["giraffes", "orangutans", "monkeys"],
  y: [20, 14, 23],
  name: "SF Zoo",
  type: "bar"
};
var trace2 = {
  x: ["giraffes", "orangutans", "monkeys"],
  y: [12, 18, 29],
  name: "LA Zoo",
  type: "bar"
};
var data = [trace1, trace2];
var layout = {barmode: "group"};
var graphOptions = {layout: layout, filename: "grouped-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Stacked Bar Chart

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

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

var trace1 = {
  x: ["giraffes", "orangutans", "monkeys"],
  y: [20, 14, 23],
  name: "SF Zoo",
  type: "bar"
};
var trace2 = {
  x: ["giraffes", "orangutans", "monkeys"],
  y: [12, 18, 29],
  name: "LA Zoo",
  type: "bar"
};
var data = [trace1, trace2];
var layout = {barmode: "stack"};
var graphOptions = {layout: layout, filename: "stacked-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Colored and Styled Bar Chart

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

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

var trace1 = {
  x: [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
  y: [219, 146, 112, 127, 124, 180, 236, 207, 236, 263, 350, 430, 474, 526, 488, 537, 500, 439],
  name: "Rest of world",
  marker: {color: "rgb(55, 83, 109)"},
  type: "bar"
};
var trace2 = {
  x: [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
  y: [16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270, 299, 340, 403, 549, 499],
  name: "China",
  marker: {color: "rgb(26, 118, 255)"},
  type: "bar"
};
var data = [trace1, trace2];
var layout = {
  title: "US Export of Plastic Scrap",
  xaxis: {tickfont: {
      size: 14,
      color: "rgb(107, 107, 107)"
    }},
  yaxis: {
    title: "USD (millions)",
    titlefont: {
      size: 16,
      color: "rgb(107, 107, 107)"
    },
    tickfont: {
      size: 14,
      color: "rgb(107, 107, 107)"
    }
  },
  legend: {
    x: 0,
    y: 1.0,
    bgcolor: "rgba(255, 255, 255, 0)",
    bordercolor: "rgba(255, 255, 255, 0)"
  },
  barmode: "group",
  bargap: 0.15,
  bargroupgap: 0.1
};
var graphOptions = {layout: layout, filename: "style-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Bar Chart with Hover Text

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

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

var data = [
  {
    x: ["Liam", "Sophie", "Jacob", "Mia", "William", "Olivia"],
    y: [8.0, 8.0, 12.0, 12.0, 13.0, 20.0],
    text: ["4.17 below the mean", "4.17 below the mean", "0.17 below the mean", "0.17 below the mean", "0.83 above the mean", "7.83 above the mean"],
    marker: {color: "rgb(142, 124, 195)"},
    type: "bar"
  }
];
var layout = {
  title: "Number of graphs made this week",
  font: {family: "Raleway, sans-serif"},
  showlegend: false,
  xaxis: {tickangle: -45},
  yaxis: {
    zeroline: false,
    gridwidth: 2
  },
  bargap: 0.05
};
var graphOptions = {layout: layout, filename: "bar-with-hover-text", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Customizing Individual Bar Colors

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

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

var data = [
  {
    x: [1, 2, 3, 4],
    y: [5, 4, -3, 2],
    marker: {color: ["#447adb", "#447adb", "#db5a44", "#447adb"]},
    type: "bar"
  }
];
var graphOptions = {filename: "bar-marker-array", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});