Charts Components

Charts Components cover Charts Dark Components cover

The Charts component for React Native is a powerful and customizable component for creating interactive data visualizations. It supports bar, line, and pie, and delivers smooth animations. Ideal for dashboards and analytics, this component enhances user engagement while simplifying data representation in mobile applications.

  • Supports color variants using Tailwind CSS colors
  • Includes dark mode support via nativewind
  • Maintains consistent styling with other chart components
  • Uses proper TypeScript types
  • Handles dynamic data with proper color shading
  • Supports customization through props

Do note that you will need React Native SVG for this chart component to work.

Line Chart Component

NativeWind Line charts component with configurable props, comes with all color variants and dynamic data.

Preview

Line Chart light component
Line Chart dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Bar Chart Component

NativeWind Bar charts component with configurable props, comes with all color variants and dynamic data.

Preview

Bar Chart light component
Bar Chart dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Pie Chart Component

NativeWind Pie charts component with configurable props, comes with all color variants and dynamic data.

Preview

Pie Chart light component
Pie Chart dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Progress Chart Component

NativeWind Progress charts component with configurable props, comes with all color variants and dynamic data.

Preview

Progress Chart light component
Progress Chart dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Stacked Bar Chart Component

NativeWind Stacked Bar chart component with configurable props, comes with all color variants and dynamic data.

Preview

Stacked Bar Chart light component
Stacked Bar Chart dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Contribution Graph Component

NativeWind Contribution Graph component with configurable props, comes with all color variants and dynamic data.

This component is inspired by GitHub / GitLab contribution graph.

Preview

Contribution Graph light component
Contribution Graph dark component

Code

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.

Hestia Kit Premium

You have to be signed in to favorite this

Share

Hestia Kit Premium

This is Hestia Kit premium component