6 Powerful Components for Chart Design6 Powerful Components for Chart Design

Here are the best premade packages for creating slick graphs and visualizing data in Framer.

November 28, 2019

From fintech and fitness apps to B2B software, data visualization is becoming more and more common in tech today. There are a number of chart makers out there for building reports and dashboards, but what’s the best way to bring beautiful graph and chart design into your prototypes? There’s no need to use other software or go searching for an external chart maker. Framer has a whole host of pre-built components for just that.

This post outlines six of the best components for creating graphs. Learn how to create pie charts, bar charts, line graphs, and more with data from a range of sources, including JSON files, CSVs, and URLs.

D3 Charts

Based on the React implementation of D3, you’ll find a number of different chart types to choose from with this component. Currently, there are six supported—area charts, bar charts, line charts, pie charts, scatter plots, and waveforms.

Plus, once you start using it you can suggest extra functionality that you would like to see by making a pull request on GitHub.

Check out the D3 Charts package ›

ApexCharts

ApexCharts is a free, open-source library that you can use to create stunning interactive charts. Now, thanks to package creator Jenil Gogari, you can take advantage of this data visualization tool within Framer. As you start to use it, you’ll notice that the library’s interactions and animations are already built in.

Jenil also shared his inspiration behind creating the package, plus why he thinks product teams should start thinking more about data visualization, in this blogpost.

Check out the Apex Charts package ›

Chart.JS

This package harnesses the functionality of Chart.js to deliver sleek and simple bar charts. It’s super customizable thanks to the Property Controls that come with it. Adjust these to make the look and feel right for your prototype.

Check out the Chart.JS package ›

Recharts

This package offers three different charts—a line chart, bar chart, and area chart. It’s the perfect choice if you have a range of data sources. Choose to either upload your own JSON data or simply paste in a URL and Recharts will do the rest.

Check out the Recharts package ›

Circle Graph

Sometimes, all you need is a simple way to display some data. If you’re looking for a pie chart, Circle Graph is a simple yet flexible way to help you visualize your data. Almost everything here is customizable, including radius, stroke width, text and stroke color, fill, background, and more.

Check out the Circle Graph package ›

Curved Line Graph

This component lets you add beautiful curved bezier line charts to your Framer designs. Install it, add your data, and then choose the line color, whether you want to show dots, hide or display the X and Y axes, and more within the Property Controls.

Check out the Curved Line Graph package ›


All of these packages will enable you to harness your data and create beautiful chart designs in Framer, exactly the way you want them thanks to the Property Controls they have set up.

Not only can you change the way these graphs look and behave using the Framer UI, but since these components are all based on code, you can use Overrides to control these components dynamically.

Learn more about some of the concepts outlined in this blogpost and discover more powerful components:

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.