Bars With Line

A combined bar chart and line graph component for visualizing task data with interactive filtering and tooltips showing percentage changes between weeks. Line graph adapts to show the data corresponding to the selected task status.

Week 1Week 2Week 3Week 4Week 5Week 6Weeks05101520253035404550Number of Tasks
todo
inProgress
done
Total Tasks

Usage

import { useRef, useState, useEffect } from 'react';
import BarsWithLine from '@/components/BarsWithLine';

export default function TaskDashboard() {
  // Task data for the chart
  const taskData = [
    { week: 'Week 1', todo: 12, inProgress: 5, done: 7, totalTasks: 24 },
    { week: 'Week 2', todo: 10, inProgress: 8, done: 9, totalTasks: 27 },
    { week: 'Week 3', todo: 8, inProgress: 7, done: 14, totalTasks: 29 },
    { week: 'Week 4', todo: 15, inProgress: 9, done: 10, totalTasks: 34 },
    { week: 'Week 5', todo: 9, inProgress: 12, done: 16, totalTasks: 37 },
    { week: 'Week 6', todo: 11, inProgress: 14, done: 18, totalTasks: 43 }
  ];
  
  // State for chart dimensions
  const [dimensions, setDimensions] = useState({ width: 800, height: 500 });
  const chartRef = useRef<HTMLDivElement>(null);
  
  // Update dimensions based on container size
  useEffect(() => {
    const updateDimensions = () => {
      if (chartRef.current) {
        const width = chartRef.current.clientWidth;
        setDimensions({ width, height: width * 0.6 });
      }
    };
    
    updateDimensions();
    window.addEventListener('resize', updateDimensions);
    
    return () => window.removeEventListener('resize', updateDimensions);
  }, []);

  return (
    <div className="md:col-span-2 bg-blue-100 dark:bg-slate-900 rounded-xl p-4 md:p-6 border-4 border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
      <h2 className="text-xl md:text-2xl font-bold mb-2 md:mb-3">Bar Graph with Trend Line</h2>
      <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
        Weekly task status with trend line showing total tasks
      </p>
      
      <div ref={chartRef} className="w-full relative overflow-visible">
        <BarsWithLine 
          width={dimensions.width} 
          height={dimensions.height} 
          data={taskData}
          events={false}
          barColors={['#93c5fd', '#60a5fa', '#3b82f6']}
        />
      </div>
    </div>
  );
}

Examples

Basic Bars With Line Chart

A combined bar and line chart showing task status with a line graph overlay. The dropdown allows filtering by task status, and the line chart shows the corresponding data based on selection.

Week 1Week 2Week 3Week 4Week 5Week 6Weeks05101520253035404550Number of Tasks
todo
inProgress
done
Total Tasks
const taskData = [
  { week: 'Week 1', todo: 12, inProgress: 5, done: 7, totalTasks: 24 },
  { week: 'Week 2', todo: 10, inProgress: 8, done: 9, totalTasks: 27 },
  { week: 'Week 3', todo: 8, inProgress: 7, done: 14, totalTasks: 29 },
  { week: 'Week 4', todo: 15, inProgress: 9, done: 10, totalTasks: 34 },
  { week: 'Week 5', todo: 9, inProgress: 12, done: 16, totalTasks: 37 },
  { week: 'Week 6', todo: 11, inProgress: 14, done: 18, totalTasks: 43 }
];

<BarsWithLine 
  width={600}
  height={400}
  data={taskData}
  events={true}
  barColors={['#93c5fd', '#60a5fa', '#3b82f6']}
  lineColor="#ef4444"
/>

Custom Colors

A chart with custom colors for the bars and line. When selecting different task statuses from the dropdown, the line graph will show the corresponding value.

Week 1Week 2Week 3Week 4Week 5Week 6Weeks05101520253035404550Number of Tasks
todo
inProgress
done
Total Tasks
<BarsWithLine 
  width={600}
  height={400}
  data={taskData}
  events={true}
  barColors={['#fca5a5', '#f87171', '#ef4444']}
  lineColor="#22c55e"
/>

Responsive Implementation

Using a reference and dimensions state to create a responsive chart that adapts to container width.

Task Management Progress

Weekly task status with trend line

Week 1Week 2Week 3Week 4Week 5Week 6Weeks05101520253035404550Number of Tasks
todo
inProgress
done
Total Tasks
// In your component:
const [dimensions, setDimensions] = useState({ width: 600, height: 360 });
const chartRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  const updateDimensions = () => {
    if (chartRef.current) {
      const width = chartRef.current.clientWidth;
      setDimensions({ width, height: width * 0.6 });
    }
  };
  
  updateDimensions();
  window.addEventListener('resize', updateDimensions);
  return () => window.removeEventListener('resize', updateDimensions);
}, []);

// In your JSX:
<div ref={chartRef} className="relative overflow-visible">
  <BarsWithLine 
    width={dimensions.width} 
    height={dimensions.height} 
    data={taskData}
    events={true}
    barColors={blueColors}
    lineColor={redLineColor}
  />
</div>