Modern and Simple Charts with Frappe Charts

Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts Demo — https://frappe.io/charts

F rappe Charts is a GitHub-inspired modern, intuitive and responsive charts with zero dependencies. I’ve been watching this project grow over the last few months, and thought it was a very cool project.

For old times sake, We’ll be using vanilla JavaScript. If you’re not so sure about your JavaScript game, I’d recommend picking up this book before you head out.

Installation

Install via npm :

npm install frappe-charts

and include in your project:

Let’s start with a simple pie chart example. We want to show to our users what the mobile operating system market share worldwide is.

For that we need a div element, and the pie.js JavaScript file.

Next, let’s create a new Frappe Chart instance and bind it to our div.

This creates the basic layout for our pie chart.

Pie chart without data

Why is our pie chart blank? Simple, we haven’t added any data yet. Let’s add the data.

Data property — https://frappe.io/charts/docs/reference/configuration#data

Notice the dataset property where add the values. Each value is correlated with the name by index. Once we add the values, we should see a beautiful pie chart.

Pie chart showcasing the mobile operating system market share worldwide

Woah! Android is dominating the market by having more than 2/3 of the total share. Should we be concerned?

I believe in free markets to a degree, let the best products win, but we should always be able to pick between products to avoid the mono — or duopoly scenario.

Back to our chart, what happens if we change the type property to percentage?

type: "percentage",

Percent chart showcasing the mobile operating system market share worldwide

We get a visual representation of the total phone market. That was pretty easy to configure! The type property lets us use the line , bar , axis-mixed , pie , percentage or the heatmap chart.

Frappe Charts type property — https://frappe.io/charts/docs/reference/configuration#type

So far we know the pie and percentage charts. Let’s explore the other charts too.

Cryptocurrency chart

Let’s imagine we fetch the cryptocurrency prices from an api, the next logical step would be to somehow show these numbers in a delightful way. Frappe Charts lets us do that relatively easily.

First, we create the labels for our day, so the users know the time of the price.

Next, we pass the values to our data, like we defined our values for our pie chart. Imagine those numbers as the price. And finally, configure the chart type to be axis-mixed

Cryptocurrency price chart (dummy data)

Pretty neat, huh? I’m super excited about the future of this project. If you want to discover the full capabilities of Frappe charts, head to the docs here .

If you want to learn interactive data visualization for the web in-depth, start from this book , I found it to be useful and full of examples.

Check out the source code here.