Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
Sophisticated chart types
plotly.js
abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.
d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){
var trace = {
x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z,
type: 'contour', autocolorscale: false,
colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]],
reversescale: true, zmax: 2.5, zmin: -2.5
};
var layout = {
title: {
text: 'turbulence simulation'
},
xaxis: {
title: {
text: 'radial direction'
},
showline: true,
mirror: 'allticks',
ticks: 'inside'
},
yaxis: {
title: {
text: 'vertical direction'
},
showline: true,
mirror: 'allticks',
ticks: 'inside'
},
margin: {l: 40, b: 40, t: 60},
annotations: [{
showarrow: false,
text: 'Credit: Daniel Carrera',
x: 0, y: 0, xref: 'paper', yref: 'paper'
}]
}
Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false});
});
Fully customizable
plotly.js
charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){
var trace = {
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row){ // set the x-data
return row['Time'];
}),
y: rows.map(function(row){ // set the x-data
return row['10 Min Sampled Avg'];
}),
line: { // set the width of the line.
width: 1
},
error_y: {
array: rows.map(function(row){ // set the height of the error bars
return row['10 Min Std Dev'];
}),
thickness: 0.5, // set the thickness of the error bars
width: 0
}
};
var layout = {
yaxis: {
title: {
text: "Wind Speed"
}
}, // set the y axis title
xaxis: {
showgrid: false, // remove the x-axis grid lines
tickformat: "%B, %Y" // customize the date format to "month, day"
},
margin: { // update the left, bottom, right, top margin
l: 40, b: 10, r: 10, t: 20
}
};
Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false});
});
High performance
This chart was drawn with the plotly.js
chart type scattergl
. scattergl
charts render an order of magnitude faster than their SVG counterparts.
Universal
By abstracting charts to a declarative JSON structure,
plotly.js
is used as a browser-based charting library for
Python,
R,
MATLAB.
Configuration Options
View TutorialResponsive / Fluid Layouts
View Tutorialuirevision in Plotly.react
View TutorialReact Plotly.js
View TutorialAnalytical Apps with Dash
View TutorialScatter Plots
View TutorialLine Charts
View TutorialBar Charts
View TutorialPie Charts
View TutorialBubble Charts
View TutorialError Bars
View TutorialBox Plots
View TutorialHistograms
View Tutorial2d Density Plots
View TutorialContinuous Error Bars
View TutorialContour Plots
View TutorialHeatmaps
View TutorialTernary Plots
View TutorialParallel Coordinates Plot
View TutorialLog Plots
View TutorialWaterfall Charts
View TutorialIndicators
View TutorialCandlestick Charts
View TutorialFunnel and Funnelarea Charts
View TutorialTime Series
View TutorialMigrate to Maplibre
View TutorialTile Map Layers
View TutorialTile Density Heatmap
View TutorialChoropleth Tile Map
View TutorialLines on Maps
View Tutorial3D Scatter Plots
View TutorialRibbon Plots
View Tutorial3D Surface Plots
View Tutorial3D Mesh Plots
View Tutorial3D Line Plots
View TutorialSubplots
View TutorialInset Plots
View Tutorial3D Subplots
View TutorialMixed Subplots
View TutorialTable Subplots
View TutorialClick Events
View TutorialHover Events
View TutorialZoom Events
View TutorialDisable Zoom Events
View TutorialDropdown Events
View TutorialButton Events
View TutorialSlider Events
View TutorialLasso Selection
View TutorialRange Slider and Selector
View TutorialAnimations
View TutorialAdding Sliders to Animations
View TutorialFilled-Area Animation
View TutorialMap Animation
View TutorialRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4