6 Powerful Components for Chart Design
Here are the best premade packages for creating slick graphs and visualizing data in Framer.
From fintech and fitness apps to B2B software, data visualization is becoming more and more common in tech today. And for good reasons too; by presenting data visually in the form of a graph, it’s easy for app users get a quick overview and spot trends over time.
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 designs into your prototypes? There’s actually no need to use another, Framer has a whole host of pre-built components which allows you to design stunning charts that enhances the UX. This post outlines six of the best components for creating those outstanding charts. You’ll 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.
Chart design components in Framer
We'll go through the following chart design components:
- D3 Charts
- Apex Charts
- Circle Graph
- Curved Line Graph
Once you start using this component, you can suggest extra functionality that you would like to see by making a pull request on GitHub.
Curved line graphic
Apex Charts is a free, open-source library that you can use to create a stunning, interactive chart design. 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. With this handy package, you can customize anything from opacity to the appearance of the curve.
Jenil also shared his inspiration behind creating the Apex Charts package, plus why he thinks product teams should start thinking more about data visualization, in this blog post. In short, he believes that presenting your data visually will help you communicate your message clearer, as well as helping people understand why they should care about a certain issue.
This package was created by Parker Henderson and harnesses the functionality of Chart.js to deliver a sleek and simple bar chart. It’s super customizable thanks to the Property Controls that come with it. You can change things like border width, colors and background to ensure that you get the right look and feel right for your prototype.
Like what you’re reading?
Sign up to our email list to get the best of the Framer blog sent directly to your inbox.
The Recharts package is the perfect choice if you have a wide range of data sources. Choose to either upload your own JSON data or simply paste in a URL and Recharts will take care of the rest. Currently, three chart design types are supported: line, bar and area.
Circle Graph Graphic
Sometimes, all you need is a simple way to display some data. Whether you just want to create a plain circle graph or a pie chart that really stands out, Circle Graph is a simple yet flexible graph maker that has got you covered.
Almost everything in this chart component is customizable, including radius, stroke width, text and color, fill, background, and more.
Curved Line Graph
Curved Line Graph Graphic
This component lets you add a beautiful curved bezier line chart to your Framer design. First install it and add your data. Then, use the Property Controls to set the line chart color, whether you want to show dots, hide or display the X and Y axes, and more. You can also use a line graph maker like this one for inspiration or to download and embed graphs you already have.
All of these packages will enable you to harness your data and create a beautiful chart design in Framer. Thanks to the Property Controls, customization is easy. 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 also use Overrides to control them dynamically.
Learn more about some of the concepts outlined in this blogpost and discover more powerful components: