# Interactive Bar Chart Poll

> This code implements an interactive bar chart poll using React, Framer Motion, and a styling solution (likely CSS framework). It allows users to vote for different options, dynamically updating a bar chart to visualize the results.  The component consists of three parts:   1. **BarPoll:** This is the main component that renders the entire poll section. It uses `useState` to manage the vote counts for each option.  It divides the UI into two sections: `Options` and `Bars`.  2. **Options:** This component displays interactive buttons for each poll option.  Each button increments the vote count for the selected option using `handleIncrementVote`, which updates the state via `setVotes`. The update utilizes a functional update pattern (`setVotes((pv) => ...)` ) to ensure correct state updates. The component also displays the total number of votes and a reset button to clear all votes.  3. **Bars:** This component renders the bar chart. It calculates the height of each bar based on the proportion of votes it received and uses Framer Motion's `motion.span` to animate the bar height with a spring effect.  The chart dynamically adjusts to the number of options.  The code leverages React's state management for interactivity, Framer Motion for smooth animations, and a styling solution (likely a CSS framework) for visual appeal. It's suitable for applications where user engagement and visual data representation are important, such as surveys, feedback forms, or simple opinion polls.  For example, it could be used on a website to gauge user preferences on a design feature or to collect feedback on different product options.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/interactive-bar-chart-poll

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/interactive-bar-chart-poll?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt