Bar Chart Visualization

I'll recreate the bar chart visualization from your Figma design using Next.js and a charting library.

This implementation recreates the bar chart from your Figma design with the following features:

1. Color Scheme: Uses the exact design tokens from your Figma context:

   • Light green (#b3dac7) for "On Target" bars
   • Light yellow (#fce2aa) for "Over" bars
   • Light pink (#fbc6c6) for "Under" bars

2. Layout:

   • Title "CT" on the left
   • Legend with color indicators on the right
   • Bar chart with dates on the x-axis and values on the y-axis
   • Value labels on top of each bar

3. Data Visualization:

   • Matches the exact values and colors shown in your design
   • Y-axis range from 800 to 1800
   • X-axis showing dates from October to January

The chart is responsive and will adjust to different screen sizes. I've used Chart.js for the visualization as it provides good customization options to match your design.

I'll update the chart to include the dark grey bars behind the colored bars as shown in the Figma design.

I've updated the chart to include the dark grey bars behind the colored bars, matching the design in your Figma frame. Here's what I changed:

1. Added a background dataset:

   • Created a second dataset with dark grey bars (#4d5361)
   • Set these bars to full height (1800) to create the background effect
   • Positioned them behind the colored bars using the order property

2. Improved bar positioning:

   • Adjusted the bar thickness to better match the design
   • Used consistent width for both the background and foreground bars
   • Made sure the colored bars align perfectly with the background bars

3. Enhanced tooltip behavior:

   • Modified the tooltip to only show for the colored bars (not the background bars)
   • Maintained the same data label display on top of each bar

The chart now more accurately represents the design with the dark grey background bars providing visual context for the colored bars. This creates the same visual effect as shown in your Figma design, where each colored bar appears to be overlaid on a consistent dark grey background.