plotly.js
Plotly.js is a tool for making different types of charts. It offers more than 40 types of charts.
- 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 a free and open-source tool that follows the MIT license. It's completely free to download and use. You can access its source code, report any problems, and contribute to its development via GitHub.
Bar Charts
Horizontal Bar Charts
Pie Charts
Donut Charts
Plotting Equations
Scatter Plots
Line Graphs
Bubble Plots
Bubble plots are like scatter plots, but the dots can be different colors, sizes, and shapes.
It's like a chart but in 3D, yet it only uses two axes, the x and y. The size of each bubble on the chart shows the third dimension.
Linear Graphs
Multiple Lines
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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,0.6)"
}
}];
const layout = {
title: "World Wide Wine Production"
};
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];
const layout = {
title: "World Wide Wine Production"
};
const data = [{
labels: xArray,
values: yArray,
type: "pie"
}];
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];
const layout = {
title: "World Wide Wine Production"
};
const data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
}];
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
let exp = "Math.cos(x)";
// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.2) {
xValues.push(x);
yValues.push(eval(exp));
}
// Display using Plotly
const data = [{
x: xValues,
y: yValues,
mode: "markers"
}];
const layout = {
title: "y = " + exp
};
Plotly.newPlot("myPlot", data, layout);
</script>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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];
// Define Data
const data = [{
x: xArray,
y: yArray,
mode: "markers"
}];
// Define Layout
const layout = {
xaxis: {
range: [40, 160],
title: "Square Meters"
},
yaxis: {
range: [5, 16],
title: "Price in Millions"
},
title: "House Prices vs. Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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];
// Define Data
const data = [{
x: xArray,
y: yArray,
mode: "lines"
}];
// Define Layout
const layout = {
xaxis: {
range: [40, 160],
title: "Square Meters"
},
yaxis: {
range: [5, 16],
title: "Price in Millions"
},
title: "House Prices vs. Size"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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 trace2 = {
x: [1, 2, 3, 4],
y: [15, 30, 45, 60],
mode: 'markers',
marker: {
color: 'rgb(31, 119, 180)',
size: 18,
symbol: ['circle', 'square', 'diamond', 'cross']
},
};
const data = [trace1, trace2];
const layout = {
title: "Plotting Bubbles"
};
Plotly.newPlot('myPlot', data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
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));
}
// Define Data
const data = [{
x: xValues,
y: yValues,
mode: "lines"
}];
// Define Layout
const layout = {
title: "y = " + exp
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<script>
let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";
// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];
for (let x = 0; x <= 10; x += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
y3Values.push(eval(exp3));
}
// Define Data
const data = [{
x: x1Values,
y: y1Values,
mode: "lines"
}, {
x: x2Values,
y: y2Values,
mode: "lines"
}, {
x: x3Values,
y: y3Values,
mode: "lines"
}];
//Define Layout
const layout = {
title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery