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.
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
Next, let’s create a new Frappe Chart instance and bind it to our div.
This creates the basic layout for our pie chart.
Why is our pie chart blank? Simple, we haven’t added any data yet. Let’s add the data.
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.
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
We get a visual representation of the total phone market. That was pretty easy to configure! The type property lets us use the
percentage or the
So far we know the pie and percentage charts. Let’s explore the other charts too.
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
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.