Charts Components

Charts 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.

Charts

Line Chart Component

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

Preview

Line Chart light component

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

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

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

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

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

Unlock the code

Upgrade to Hestia Kit Pro to unlock the code.