VSPlotter
VSPlotter is a lightweight, high-performance plotting extension for Visual Studio Code. It allows you to quickly create and visualize plots from CSV files directly within your VS Code environment.
Features
- ✅ Supported file types: CSV, JSON
- ✅ Create plots from CSV files within VS Code
- ✅ Create AG Grid Tables from CSV files
- ✅ Lightweight and high-performance plotting using uPlot
- ✅ Interactive selection of x-axis and y-axis columns
- ✅ Support for multiple y-axis columns against a single x-axis
- ✅ Automatic row numbering for default x-axis
- ✅ Automatic handling of non-numeric data with enum label generation
- ✅ Saved plot settings to easily recreate plots for multiple CSV files
- ✅ Seamless integration with VS Code's interface
Quick Start
- Open a
.csv
file in VS Code
- Run the command
VSPlotter: Create plot from file
- Select your x-axis and y-axis column(s)
- View your plot in a new VS Code tab
Commands
VSPlotter: Show Sample Grid Table
: Displays a sample grid to show the extension's capabilities
VSPlotter: Show Sample Plot
: Displays a sample chart to show the extension's capabilities
VSPlotter: Create Plot from file
: Creates a plot from the selected CSV file
VSPlotter: Create Grid Table from file
: Creates a grid table from the selected CSV file
VSPlotter is built on top of the uPlot charting library, known for its exceptional performance and small footprint. This ensures that VSPlotter can handle large datasets with ease, providing a smooth and responsive plotting experience even for complex visualizations.
For Data Grid visualizations, AG Grid is used for a full-featured, high-performance spreadsheet like viewer for CSV files.
Requirements
- Visual Studio Code v1.60.0 or higher
Usage Examples
Create a plot from a file
- Open a
.csv
file or left-click the file from the Explorer window.
- Select the
VSPlotter: Create Plot from file
from the command pallete.
- Select your desired X-Axis (default is the row number).
- Select 1 or more columns for the Y-Axis.
- Click
OK
to create the plot.
- Hover over the graph to see point values.
- Click, hold, and drag to zoom.
- Double click to reset zoom.

Create a plot from a grid table
- Open a
.csv
file or left-click the file from the Explorer window.
- Select the
VSPlotter: Create Grid Table from file
from the command pallete.
- Select your desired X-Axis in the dropdown menu (default is the row number).
- Select 1 or more columns for the Y-Axis by clicking on the column header(s).
- Click the
Plot Selected
button to generate the plot.

Plot enumerated (string) data
String data is automatically detected and enumerated for plotting

Selecting Saved Plots
Each time a plot is created, it is saved under the Saved Plots
section of the VSPlotter Plots
Tree View within the Explorer
tab.
- Click on the ✚ symbol to create a new plot from the same file
- Click on the 🗂️ symbol to open the file in a Grid Table.
- Click on the 📈 symbol to restore a previously created plot.
- Click on the 🗑️ symbol to delete a saved plot.

Reusing Saved Plot Settings
Each unique X and Y-Axis combination is saved under the Saved Plot Settings
section of the VSPlotter Plots
Tree View within the Explorer
tab. These settings can be re-used for separate files with similar column data (e.g. stock data, time series data, etc.).
- Click on the desired settings under
Saved Plot Settings
- Select a file with the same column data used in the saved settings.

Known Issues
Release Notes
See the CHANGELOG for details on each release.
Acknowledgements
VSPlotter is powered by uPlot and AG Grid.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Enjoy plotting with VSPlotter!