📢 #3 Charts 📈 🈸 📊 in VSCode
Tags: showdev, vscode, dataviz, devtools
Published: 2019-11-09 12:03:02

---
title: 📢 #3 Charts 📈 🈸 📊 in VSCode
published: true
description: vscode dataViz dev tools to check out
tags: #showDev #vscode #dataViz #devTools
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vpkt3aopkpcamk8u1wl1.png
---

Encouraged by the 40+ reactions & over 1k views on my first two posts on this dev site overnight, I'd like to share with you another VSCode extension I started working on recently to gauge devs interest in viewing and prototyping charts in vscode.

## Back Story

First, I should probably provide some background info why I created #1 [Vega Viewer 📈](https://dev.to/tarasnovak/visual-studio-code-vega-viewer-5gi6) & #2 [Data Preview 🈸](https://dev.to/tarasnovak/visual-studio-code-data-preview-41no) vscode dataViz dev tools this year.

I've been doing a lot of custom dataViz dev work through my indy co. [Random Fractals Inc.](https://github.com/RandomFractals) for years, mostly using d3 & Py libraries. They are great tools to visualize data. However, diving into raw d3 and even Jupyter notebooks require years of practice and experience. 

You can explore my OSS [#jsNotebooks 📚](https://twitter.com/search?q=%23jsNotebooks&src=typed_query&f=live) on ObservableHQ: https://observablehq.com/@randomfractals

& Py notebooks I've done on Chicago crimes here :( 
https://www.linkedin.com/pulse/chicago-crimes-2017-taras-novak

## #1 Hello, Vega! :)

Lately, a lot of great charting libraries came on the scene to alleviate the raw d3.js pain.
 
[Vega](https://vega.github.io/vega/) library is one of them. Vega provides simple JSON visualization grammar with great support for JavaScript, TypeScript & Python language libraries. 

See [Vega-Lite Ecosystem](https://vega.github.io/vega-lite/ecosystem.html) page for tools, plugins & language bindings you can use for Vega charts 📊, maps 🗺️ & graphs 📈.

I started off this year by creating [Vega Viewer 📈](https://dev.to/tarasnovak/visual-studio-code-vega-viewer-5gi6) extension for VSCode since it's the IDE I use for all of my JS, TS, C#, Py & Java dev work.

While Vega provides a great online [Vega Editor](https://vega.github.io/editor/#/) I found it somewhat lacking for my daily dataViz dev workflow since I often prototype charts with local data snapshots and commit those revs to github for the custom dashboards I work on. 

So, I created [Vega Viewer 📈](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) extension for vscode that allows me to prototype Vega graphs fast locally ;)

![Box Plot](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/images/vega-viewer-boxplot.png?raw=true 
 "Vega Viewer Box Plot Preview")

## #2 Data Preview 🈸

Shortly after, I also discovered that VSCode doesn't really have a good extension for previewing raw data for exploratory data analysis if you don't count the recent Jupyter notebooks support Microsoft added this year.

So, I created [Data Preview 🈸](https://dev.to/tarasnovak/visual-studio-code-data-preview-41no) extension with pluggable [data providers](https://github.com/RandomFractals/vscode-data-preview/blob/master/src/data.manager.ts) for different data formats, including all the Excel files and the popular [Apache Arrow](https://arrow.apache.org/powered_by/) data format used by most dataViz geeks and data scientists today.

![Data Preview](https://github.com/RandomFractals/vscode-data-preview/blob/master/images/vscode-data-preview.png?raw=true 
"Data Preview")

I picked [Perspecive](https://perspective.finos.org/) library for that extension Data View part due to built-in Arrow data support, fast canvas-based grid rendering, some basic built-in charts features, and extremely fast data transformations via webAssembly.

I jotted some ideas to make Data Preview 🈸 better in the future revs here: https://github.com/RandomFractals/vscode-data-preview/issues if you'd like to peruse that list & 👍 the features you'd like to see there next.

## #3 Chart.js 📊 Preview

Because all good things come in 3's as Nikola Tesla used to say, I recently published this [Chart.js Preview](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-chartjs) MVP extension.

[Chart.js](https://github.com/chartjs/Chart.js) Preview 📊 for [VSCcode](https://code.visualstudio.com/)

![Chart.js Preview](https://github.com/RandomFractals/vscode-chartjs/blob/master/images/vscode-chartjs-preview.png?raw=true 
 "Chart.js Preview")

# Features

Chart.js Preivew 📊 of [`json5`](https://json5.org/) `.chart` config files.

See [`./samples`](https://github.com/RandomFractals/vscode-chartjs/tree/master/samples) for chart config examples. 

**Note**: more [Chart.js Samples](https://www.chartjs.org/samples/latest/) will be added in the next v. update!

# Usage 

1. Use `Chart: Chart Samples` command from `View -> Command Pallette...` menu 
for a quick list of built-in chart config examples.

2. Run `Chart: Preview Chart` command on an open `.chart.json5` chart config document to Preview 📊

# Chart.js Preview 📊 VSCode Contributions

![Chart.js Preview Contributions](https://github.com/RandomFractals/vscode-chartjs/blob/master/images/vscode-chartjs-contributions.png?raw=true 
 "Vega Viewer VSCode Contributions")

# Chart.js Preview 📊 Commands

![Chart.js Preview Commands](https://github.com/RandomFractals/vscode-chartjs/blob/master/images/vscode-chartjs-commands.png?raw=true 
 "Chart.js Preivew VSCode Commands")

# Dev Log

See [#ChartJS 📊 tag on Twitter](https://twitter.com/search?q=%23chartjs%20%40code%20extension&src=typed_query) for the latest & greatest updates on this vscode extension & what's in store next.

# Next

I did reach out to the [chart.js library maintainers via github](https://github.com/chartjs/Chart.js/issues/6569) & in their Slack. However, I have not received a single response from that OSS charting library team expressing interest in this vscode extension, even tho it seems to be very popular with JS devs from all walks of life :)

So, I'm just gonna leave this here for now in case vscode devs using this site are interested in having such an extension for quick chart.js prototypes. I can add more .chart.json5 config examples for the curious minds ...

Post your comments on that || the other 2 dataViz dev tools I've built for vscode below.

Cheers!

P.S.:

{% twitter 1192173027624194048 %}

{% twitter 1188801465042833411 %}