Plotly.js

Plotly.js is a versatile charting library that offers over 40 chart types, including:

• Horizontal and Vertical Bar Charts
• Pie and Donut Charts
• Line Charts
• Scatter and Bubble Plots
• Equation Plots
• 3D Charts
• Statistical Graphs
• SVG Maps

Plotly.js is free and open-source under the MIT license, making it cost-free to install and use. You can view the source, report issues, and contribute via GitHub.

Bar Charts

Source Code:

const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];

const data = [{
  x: xArray,
  y: yArray,
  type: "bar",
  orientation: "v",
  marker: { color: "rgba(0,0,255)" }
}];

const layout = { title: "World Wide Wine Production" };

Plotly.newPlot("myPlot", data, layout);

‍

Horizontal Bar Charts

Source Code:

const xArray = [55, 49, 44, 24, 15];
const yArray = ["Italy", "France", "Spain", "USA", "Argentina"];

const data = [{
  x: xArray,
  y: yArray,
  type: "bar",
  orientation: "h",
  marker: { color: "rgba(255,0,0,0.6)" }
}];

const layout = { title: "World Wide Wine Production" };

Plotly.newPlot("myPlot", data, layout);

Pie Charts

To display a pie chart, change x and y to labels and values, and change the type to "pie":

Source Code:

const data = [{
  labels: xArray,
  values: yArray,
  type: "pie"
}];

‍

Donut Charts

To display a donut chart, add a hole property:

Source Code:

const data = [{
  labels: xArray,
  values: yArray,
  hole: 0.4,
  type: "pie"
}];

‍

Plotting Equations

Source Code:

let exp = "Math.sin(x)";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
  xValues.push(x);
  yValues.push(eval(exp));
}

// Display using Plotly
const data = [{ x: xValues, y: yValues, mode: "lines" }];
const layout = { title: "y = " + exp };
Plotly.newPlot("myPlot", data, layout);

// To display scatters instead, change mode to markers:
const scatterData = [{ x: xValues, y: yValues, mode: "markers" }];
Plotly.newPlot("myPlot", scatterData, layout);

Scatter Plots

Source Code:

const xArray = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yArray = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

const data = [{
  x: xArray,
  y: yArray,
  mode: "markers",
  type: "scatter"
}];

const layout = {
  xaxis: { range: [40, 160], title: "Square Meters" },
  yaxis: { range: [5, 16], title: "Price in Millions" },
  title: "House Prices vs. Size"
};

Plotly.newPlot("myPlot", data, layout);

Line Graphs

Source Code:

const xArray = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yArray = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

const data = [{
  x: xArray,
  y: yArray,
  mode: "lines",
  type: "scatter"
}];

const layout = {
  xaxis: { range: [40, 160], title: "Square Meters" },
  yaxis: { range: [5, 16], title: "Price in Millions" },
  title: "House Prices vs. Size"
};

Plotly.newPlot("myPlot", data, layout);

Bubble Plots

Bubble plots are scatter plots where markers have variable color, size, and symbols, indicating a third dimension.

Source Code:

const xArray = [1, 2, 3, 4];
const yArray = [10, 20, 30, 40];

const trace1 = {
  x: xArray,
  y: yArray,
  mode: 'markers',
  marker: {
    color: ['red', 'green', 'blue', 'orange'],
    size: [20, 30, 40, 50]
  }
};

const data = [trace1];
const layout = { title: "Plotting Bubbles" };

Plotly.newPlot("myPlot", data, layout);

‍

Linear Graphs

Source Code:

let exp = "x + 17";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
  xValues.push(x);
  yValues.push(eval(exp));
}

const data = [{ x: xValues, y: yValues, mode: "lines" }];
const layout = { title: "y = " + exp };

Plotly.newPlot("myPlot", data, layout);

‍

Multiple Lines

Source Code:

let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";

// Generate values
const xValues = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];

for (let x = 0; x <= 10; x += 1) {
  xValues.push(x);
  y1Values.push(eval(exp1));
  y2Values.push(eval(exp2));
  y3Values.push(eval(exp3));
}

const data = [
  { x: xValues, y: y1Values, mode: "lines" },
  { x: xValues, y: y2Values, mode: "lines" },
  { x: xValues, y: y3Values, mode: "lines" }
];

const layout = { title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]" };

Plotly.newPlot("myPlot", data, layout);