tessl/npm-plotly-js
The open source JavaScript graphing library that powers Plotly with comprehensive data visualization capabilities including statistical charts, 3D graphs, scientific visualizations, and interactive plotting features.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
basic-charts.mddocs/
Basic Chart Types
Common chart types for everyday data visualization including scatter plots, bar charts, histograms, pie charts, and box plots.
Capabilities
Scatter Plots
Line charts, scatter plots, and bubble charts using the scatter trace type.
/**
* Scatter plot trace configuration
*/
interface ScatterTrace {
type: 'scatter';
x: any[];
y: any[];
mode?: 'lines' | 'markers' | 'lines+markers' | 'lines+markers+text' | 'none';
name?: string;
text?: string | string[];
textposition?: string;
marker?: {
size?: number | number[];
color?: string | string[] | number[];
symbol?: string | string[];
line?: {
width?: number;
color?: string;
};
colorscale?: string;
showscale?: boolean;
};
line?: {
color?: string;
width?: number;
dash?: 'solid' | 'dot' | 'dash' | 'longdash' | 'dashdot' | 'longdashdot';
shape?: 'linear' | 'spline' | 'hv' | 'vh' | 'hvh' | 'vhv';
};
fill?: 'none' | 'tozeroy' | 'tozerox' | 'tonexty' | 'tonextx' | 'toself' | 'tonext';
fillcolor?: string;
}Usage Examples:
// Basic line chart
Plotly.newPlot('myDiv', [{
x: [1, 2, 3, 4, 5],
y: [1, 4, 2, 8, 5],
type: 'scatter',
mode: 'lines',
name: 'Line Chart'
}]);
// Scatter plot with markers
Plotly.newPlot('myDiv', [{
x: [1, 2, 3, 4, 5],
y: [1, 4, 2, 8, 5],
type: 'scatter',
mode: 'markers',
marker: {
size: 12,
color: 'red',
symbol: 'circle'
}
}]);
// Bubble chart (varying marker sizes)
Plotly.newPlot('myDiv', [{
x: [1, 2, 3, 4, 5],
y: [1, 4, 2, 8, 5],
type: 'scatter',
mode: 'markers',
marker: {
size: [10, 20, 30, 40, 50],
color: [1, 2, 3, 4, 5],
colorscale: 'Viridis',
showscale: true
}
}]);
// Filled area chart
Plotly.newPlot('myDiv', [{
x: [1, 2, 3, 4, 5],
y: [1, 4, 2, 8, 5],
type: 'scatter',
mode: 'lines',
fill: 'tozeroy',
fillcolor: 'rgba(255, 0, 0, 0.3)'
}]);Bar Charts
Vertical and horizontal bar charts for categorical data.
/**
* Bar chart trace configuration
*/
interface BarTrace {
type: 'bar';
x?: any[];
y?: any[];
orientation?: 'v' | 'h';
name?: string;
text?: string | string[];
textposition?: 'inside' | 'outside' | 'auto' | 'none';
marker?: {
color?: string | string[] | number[];
colorscale?: string;
line?: {
color?: string;
width?: number;
};
};
width?: number | number[];
offset?: number;
base?: number | number[];
}Usage Examples:
// Vertical bar chart
Plotly.newPlot('myDiv', [{
x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
y: [20, 14, 23, 25, 22],
type: 'bar',
name: 'Sales'
}]);
// Horizontal bar chart
Plotly.newPlot('myDiv', [{
x: [20, 14, 23, 25, 22],
y: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],
type: 'bar',
orientation: 'h'
}]);
// Grouped bar chart
Plotly.newPlot('myDiv', [
{
x: ['Jan', 'Feb', 'Mar'],
y: [20, 14, 23],
type: 'bar',
name: 'Series 1'
},
{
x: ['Jan', 'Feb', 'Mar'],
y: [16, 18, 17],
type: 'bar',
name: 'Series 2'
}
]);
// Stacked bar chart
Plotly.newPlot('myDiv', [
{
x: ['Jan', 'Feb', 'Mar'],
y: [20, 14, 23],
type: 'bar',
name: 'Series 1'
},
{
x: ['Jan', 'Feb', 'Mar'],
y: [16, 18, 17],
type: 'bar',
name: 'Series 2'
}
], {
barmode: 'stack'
});Histograms
Distribution visualization for continuous data.
/**
* Histogram trace configuration
*/
interface HistogramTrace {
type: 'histogram';
x?: number[];
y?: number[];
nbinsx?: number;
nbinsy?: number;
autobinx?: boolean;
autobiny?: boolean;
xbins?: {
start?: number;
end?: number;
size?: number;
};
ybins?: {
start?: number;
end?: number;
size?: number;
};
histfunc?: 'count' | 'sum' | 'avg' | 'min' | 'max';
histnorm?: '' | 'percent' | 'probability' | 'density' | 'probability density';
name?: string;
marker?: {
color?: string;
line?: {
color?: string;
width?: number;
};
};
}Usage Examples:
// Basic histogram
Plotly.newPlot('myDiv', [{
x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5],
type: 'histogram',
nbinsx: 10
}]);
// Normalized histogram
Plotly.newPlot('myDiv', [{
x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5],
type: 'histogram',
histnorm: 'probability'
}]);
// Custom bin configuration
Plotly.newPlot('myDiv', [{
x: [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5],
type: 'histogram',
xbins: {
start: 0,
end: 6,
size: 0.5
}
}]);Pie Charts
Circular charts for showing proportions and percentages.
/**
* Pie chart trace configuration
*/
interface PieTrace {
type: 'pie';
labels: string[];
values: number[];
name?: string;
hole?: number;
pull?: number | number[];
rotation?: number;
direction?: 'clockwise' | 'counterclockwise';
sort?: boolean;
textinfo?: string;
textposition?: 'inside' | 'outside' | 'auto' | 'none';
marker?: {
colors?: string[];
line?: {
color?: string | string[];
width?: number;
};
};
domain?: {
x?: [number, number];
y?: [number, number];
};
}Usage Examples:
// Basic pie chart
Plotly.newPlot('myDiv', [{
labels: ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen'],
values: [4500, 2500, 1053, 500],
type: 'pie'
}]);
// Donut chart
Plotly.newPlot('myDiv', [{
labels: ['A', 'B', 'C', 'D'],
values: [40, 30, 20, 10],
type: 'pie',
hole: 0.4
}]);
// Pie chart with pulled slices
Plotly.newPlot('myDiv', [{
labels: ['A', 'B', 'C', 'D'],
values: [40, 30, 20, 10],
type: 'pie',
pull: [0, 0, 0.2, 0] // Pull out third slice
}]);Box Plots
Statistical distribution visualization showing quartiles, outliers, and median.
/**
* Box plot trace configuration
*/
interface BoxTrace {
type: 'box';
x?: any[];
y?: number[];
name?: string;
orientation?: 'v' | 'h';
boxpoints?: 'all' | 'outliers' | 'suspectedoutliers' | false;
boxmean?: true | 'sd' | false;
notched?: boolean;
whiskerwidth?: number;
width?: number;
offset?: number;
marker?: {
color?: string;
size?: number;
outliercolor?: string;
};
line?: {
color?: string;
width?: number;
};
fillcolor?: string;
}Usage Examples:
// Basic box plot
Plotly.newPlot('myDiv', [{
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15],
type: 'box',
name: 'Sample Data'
}]);
// Grouped box plots
Plotly.newPlot('myDiv', [
{
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
type: 'box',
name: 'Group A'
},
{
y: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
type: 'box',
name: 'Group B'
}
]);
// Box plot with all points shown
Plotly.newPlot('myDiv', [{
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15],
type: 'box',
boxpoints: 'all',
boxmean: true
}]);Violin Plots
Distribution visualization combining box plot and kernel density estimation.
/**
* Violin plot trace configuration
*/
interface ViolinTrace {
type: 'violin';
x?: any[];
y?: number[];
name?: string;
orientation?: 'v' | 'h';
side?: 'both' | 'positive' | 'negative';
width?: number;
points?: 'all' | 'outliers' | 'suspectedoutliers' | false;
box?: {
visible?: boolean;
width?: number;
};
meanline?: {
visible?: boolean;
};
span?: [number, number];
bandwidth?: number;
}Usage Examples:
// Basic violin plot
Plotly.newPlot('myDiv', [{
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 3, 4, 5, 6],
type: 'violin',
name: 'Distribution'
}]);
// Violin plot with box plot inside
Plotly.newPlot('myDiv', [{
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 2, 3, 4, 5, 6],
type: 'violin',
box: {
visible: true
},
meanline: {
visible: true
}
}]);Layout Options for Basic Charts
Bar Chart Layout
interface BarLayoutOptions {
barmode?: 'stack' | 'group' | 'overlay' | 'relative';
bargap?: number;
bargroupgap?: number;
}Common Axis Configuration
interface BasicAxisOptions {
title?: string;
type?: 'linear' | 'log' | 'date' | 'category' | 'multicategory';
range?: [number, number];
autorange?: boolean | 'reversed';
showgrid?: boolean;
zeroline?: boolean;
showline?: boolean;
showticklabels?: boolean;
tickmode?: 'linear' | 'array';
tick0?: number;
dtick?: number;
tickvals?: any[];
ticktext?: string[];
}Install with Tessl CLI
npx tessl i tessl/npm-plotly-js