What is it?

Charts are the newest addition to the Anima Components Library! Based on the components of Recharts React Library, these components are already customized and ready-to-use.

You donโ€™t have to be a designer to create beautiful & responsive data visualizations. Just insert these pre-built charts into your Figma design and create stunning dashboards ๐Ÿ˜Ž.

With Charts you can:

  • Get ready-to-use Recharts components

  • Design and customize your charts

  • Enhance your live website with interactive & responsive charts

  • Build impressive demos in minutes

How to add Charts:

  • Open the Widget Library in your Anima plugin and select Charts.

  • Choose from a wide range of available chart templates and click the Insert button.

  • If you want to edit the chart that is already in use, simply select it and click the Edit button in the plugin. To save the changes, select the chart layer and click Update.

  • Preview your live chart by selecting the frame with the chart and clicking Preview in Browser in the Anima plugin.

How to Customize Charts:

  • Adjust the size of your chart as desired.

  • Choose the colors of your chart with the color picker.

  • Change categories and values.

  • Add and adjust data labels.

  • Choose the perfect alignment of your chart.

  • Decide what chart elements you want to show (or hide).

  • Select the frame with the chart and click Preview in Browser.

  • Sync it to your Anima project and Get Code.

Getting Started๐Ÿ˜€

Try our UI Kit to explore all the possibilities of data visualization!

๐Ÿ’ Recharts

is the top used React charts library, with an active developer community and 17.8K stars on GitHub. It has native SVG support, declarative components, and it also boasts ~1M weekly npm downloads!


Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?