diff --git a/samples/App.tsx b/samples/App.tsx
index 2d8452b..822004f 100644
--- a/samples/App.tsx
+++ b/samples/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import NavBar from './utils/NavBar';
 import NormalBarChart from './pages/NormalBarChart';
 import StackedBarChart from './pages/StackedBarChart';
+import RangedBarChart from './pages/RangedBarChart';
 
 const App = () => {
   return (
@@ -12,6 +13,7 @@ const App = () => {
         <Routes>
           <Route path="/" element={<NormalBarChart />} />
           <Route path="/stacked" element={<StackedBarChart />} />
+          <Route path="/ranged" element={<RangedBarChart />} />
         </Routes>
       </div>
     </Router>
diff --git a/samples/pages/RangedBarChart.tsx b/samples/pages/RangedBarChart.tsx
new file mode 100644
index 0000000..bcbc8c2
--- /dev/null
+++ b/samples/pages/RangedBarChart.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar } from '../../src';
+import BarChartControls from '../utils/BarChartControls';
+
+const RangedBarChart = () => {
+    const [width, setWidth] = useState(600);
+    const [height, setHeight] = useState(400);
+    const [barCategoryGap, setBarCategoryGap] = useState('10%');
+    const [barGap, setBarGap] = useState(4);
+    const [layout, setLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+    const [margin, setMargin] = useState({ top: 5, right: 5, bottom: 5, left: 5 });
+    const [showXAxis, setShowXAxis] = useState(true);
+    const [showYAxis, setShowYAxis] = useState(true);
+    const [showCartesianGrid, setShowCartesianGrid] = useState(true);
+    const [showTooltip, setShowTooltip] = useState(true);
+    const [showLegend, setShowLegend] = useState(true);
+
+    const data = [
+        { name: '05-01', temperature: [-6, 12] },
+        { name: '05-02', temperature: [6, 12] },
+        { name: '05-03', temperature: [3, 12] },
+        { name: '05-04', temperature: [4, 12] },
+        { name: '05-05', temperature: [12, 15] },
+        { name: '05-06', temperature: [5, 15] },
+        { name: '05-07', temperature: [3, 12] },
+        { name: '05-08', temperature: [0, 8] },
+        { name: '05-09', temperature: [-3, 5] },
+    ];
+
+    return (
+        <div>
+            <BarChartControls
+                width={width}
+                setWidth={setWidth}
+                height={height}
+                setHeight={setHeight}
+                barCategoryGap={barCategoryGap}
+                setBarCategoryGap={setBarCategoryGap}
+                barGap={barGap}
+                setBarGap={setBarGap}
+                layout={layout}
+                setLayout={setLayout}
+                margin={margin}
+                setMargin={setMargin}
+                showXAxis={showXAxis}
+                setShowXAxis={setShowXAxis}
+                showYAxis={showYAxis}
+                setShowYAxis={setShowYAxis}
+                showCartesianGrid={showCartesianGrid}
+                setShowCartesianGrid={setShowCartesianGrid}
+                showTooltip={showTooltip}
+                setShowTooltip={setShowTooltip}
+                showLegend={showLegend}
+                setShowLegend={setShowLegend}
+            />
+            <BarChart
+                data={data}
+                width={width}
+                height={height}
+                margin={margin}
+                barCategoryGap={barCategoryGap}
+                barGap={barGap}
+                layout={layout}
+            >
+                {showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
+                {showXAxis && <XAxis dataKey="day" />}
+                {showYAxis && <YAxis />}
+                {showTooltip && <Tooltip />}
+                {showLegend && <Legend />}
+                <Bar dataKey="temperature" fill="#8884d8" />
+            </BarChart>
+        </div>
+    );
+};
+
+export default RangedBarChart;
diff --git a/samples/utils/NavBar.tsx b/samples/utils/NavBar.tsx
index b045700..f75907a 100644
--- a/samples/utils/NavBar.tsx
+++ b/samples/utils/NavBar.tsx
@@ -1,16 +1,19 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const NavBar: React.FC = () => {
+const NavBar = () => {
   return (
-    <nav className="navbar flex justify-between items-center p-4 mb-2">
-      <div className="flex space-x-4">
-        <Link className="nav-link text-lg font-semibold" to="/">
+    <nav className="bg-gray-800 p-4">
+      <div className="container mx-auto flex space-x-4">
+        <Link to="/" className="text-white hover:underline">
           Normal BarChart
         </Link>
-        <Link className="nav-link text-lg font-semibold" to="/stacked">
+        <Link to="/stacked" className="text-white hover:underline">
           Stacked BarChart
         </Link>
+        <Link to="/ranged" className="text-white hover:underline">
+          Ranged BarChart
+        </Link>
       </div>
     </nav>
   );
diff --git a/src/Bar/index.tsx b/src/Bar/index.tsx
index 3e891a8..dd3d244 100644
--- a/src/Bar/index.tsx
+++ b/src/Bar/index.tsx
@@ -8,6 +8,7 @@ interface BarProps {
     width?: number;
     height?: number;
     maxValue?: number;
+    minValue?: number;
     layout?: 'horizontal' | 'vertical';
     barIndex?: number;
     totalBars?: number;
@@ -26,6 +27,7 @@ const Bar = ({
     width = 0,
     height = 0,
     maxValue = 0,
+    minValue = 0,
     layout = 'horizontal',
     barIndex = 0,
     totalBars = 1,
@@ -39,6 +41,51 @@ const Bar = ({
     <g>
         {data.map((entry) => {
             const value = entry[dataKey];
+
+            if (Array.isArray(value)) {
+                const [minValueRange, maxValueRange] = value;
+
+                if (layout === 'horizontal') {
+                    const barHeight = ((maxValueRange - minValueRange) / (maxValue - minValue)) * height;
+                    return (
+                        <rect
+                            key={uuidv4()}
+                            x={stackIdPos * (width + barGap)}
+                            y={
+                                height -
+                                ((maxValueRange - minValue) / (maxValue - minValue)) * height -
+                                accumulatedHeight
+                            }
+                            width={width}
+                            height={barHeight}
+                            fill={fill}
+                            onMouseOver={(event) => {
+                                const { name, ...rest } = entry;
+                                onMouseOver(event, { name, ...rest });
+                            }}
+                            onMouseOut={onMouseOut}
+                        />
+                    );
+                } else {
+                    const barWidth = ((maxValueRange - minValueRange) / (maxValue - minValue)) * width;
+                    return (
+                        <rect
+                            key={uuidv4()}
+                            x={((minValueRange - minValue) / (maxValue - minValue)) * width + accumulatedHeight}
+                            y={stackIdPos * (height + barGap)}
+                            width={barWidth}
+                            height={height}
+                            fill={fill}
+                            onMouseOver={(event) => {
+                                const { name, ...rest } = entry;
+                                onMouseOver(event, { name, ...rest });
+                            }}
+                            onMouseOut={onMouseOut}
+                        />
+                    );
+                }
+            }
+
             const barHeight = (value / maxValue) * height;
             const barWidth = (value / maxValue) * width;
 
diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
index ca35368..03e478f 100644
--- a/src/BarChart/index.tsx
+++ b/src/BarChart/index.tsx
@@ -66,7 +66,7 @@ const BarChart = ({
     const hasStackedBars = React.Children.toArray(children).some(
         (child) => (child as React.ReactElement).props.stackId,
     );
-    const maxValue = roundMaxValue(data, hasStackedBars);
+    const { maxValue, minValue } = roundMaxValue(data, hasStackedBars);
 
     // Asignar un stackId único a cada Bar que no lo tenga
     const barComponents = React.Children.toArray(children).map((child) => {
@@ -126,7 +126,6 @@ const BarChart = ({
             })
             .filter((val) => val !== null);
 
-        // Actualizar el tooltip solo si los valores son válidos
         if (values.length > 0) {
             setTooltipData({ name: entry.name, values });
             const svgRect = svgRef.current?.getBoundingClientRect();
@@ -140,12 +139,9 @@ const BarChart = ({
         setTooltipData(null);
     };
 
-    const categoryGap = parseGap(
-        barCategoryGap,
-        layout === 'horizontal'
-            ? width - (margin.left ?? DEFAULT_MARGIN) - rightMargin - leftMargin
-            : height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN),
-    );
+    const handleMouseLeave = () => {
+        setTooltipData(null);
+    };
 
     const totalGroups = data.length;
     const totalBars = Object.keys(groupedBarComponents).length;
@@ -183,6 +179,7 @@ const BarChart = ({
                         ? height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)
                         : barSize - adjustedBarGap,
                 maxValue,
+                minValue,
                 barIndex,
                 totalBars,
                 barGap: adjustedBarGap,
@@ -212,7 +209,13 @@ const BarChart = ({
                 margin: `${margin.top ?? DEFAULT_MARGIN}px ${margin.right ?? DEFAULT_MARGIN}px ${margin.bottom ?? DEFAULT_MARGIN}px ${margin.left ?? DEFAULT_MARGIN}px`,
             }}
         >
-            <svg ref={svgRef} width={width} height={height + height * 0.1} className='border border-gray-300'>
+            <svg
+                ref={svgRef}
+                width={width}
+                height={height + height * 0.1}
+                className='border border-gray-300'
+                onMouseLeave={handleMouseLeave} // Aquí agregas el manejador de evento
+            >
                 <g
                     transform={`translate(${(margin.left ?? DEFAULT_MARGIN) + leftMargin}, ${
                         (margin.top ?? DEFAULT_MARGIN) + height * 0.025
@@ -224,6 +227,7 @@ const BarChart = ({
                                 <YAxis
                                     height={height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)}
                                     maxValue={maxValue}
+                                    minValue={minValue}
                                     layout={layout}
                                 />
                             )}
@@ -240,6 +244,8 @@ const BarChart = ({
                                     width={width - (margin.left ?? DEFAULT_MARGIN) - rightMargin - leftMargin}
                                     height={height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)}
                                     dataKey='name'
+                                    maxValue={maxValue}
+                                    minValue={minValue}
                                     layout={layout}
                                 />
                             )}
@@ -254,6 +260,7 @@ const BarChart = ({
                                     height={height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)}
                                     dataKey='name'
                                     maxValue={maxValue}
+                                    minValue={minValue}
                                     layout={layout}
                                 />
                             )}
@@ -269,6 +276,8 @@ const BarChart = ({
                                     data={data}
                                     width={width - (margin.left ?? DEFAULT_MARGIN) - rightMargin}
                                     height={height - (margin.top ?? DEFAULT_MARGIN) - (margin.bottom ?? DEFAULT_MARGIN)}
+                                    maxValue={maxValue}
+                                    minValue={minValue}
                                     layout={layout}
                                 />
                             )}
diff --git a/src/BarChart/utils.ts b/src/BarChart/utils.ts
index 7c86283..9889c6a 100644
--- a/src/BarChart/utils.ts
+++ b/src/BarChart/utils.ts
@@ -1,20 +1,60 @@
 import { ChartData } from '../constants';
 
-export const roundMaxValue = (data: ChartData, stacked: boolean = false): number => {
+export const findMinValue = (data: ChartData): number => {
+    let minValue: number;
+
+    minValue = Math.min(
+        ...data.map((d) =>
+            Math.min(
+                ...Object.values(d).map((v) => {
+                    if (typeof v === 'number') {
+                        return v;
+                    } else if (Array.isArray(v)) {
+                        return Math.min(...v); // Usar el valor mínimo del rango
+                    }
+                    return Infinity; // Valor por defecto si no es ni número ni array
+                }),
+            ),
+        ),
+    );
+
+    return Math.floor(minValue);
+};
+
+export const roundMaxValue = (data: ChartData, stacked: boolean = false): { maxValue: number; minValue: number } => {
     let maxValue: number;
+    let minValue: number = findMinValue(data);
 
     if (stacked) {
         const stackedSums = data.map((d) =>
-            Object.values(d).reduce((sum, value) => (typeof value === 'number' ? sum + value : sum), 0),
+            Object.values(d).reduce((sum, value) => {
+                if (typeof value === 'number') {
+                    return sum + value;
+                } else if (Array.isArray(value)) {
+                    return sum + Math.max(...value); // Sumar el valor máximo del rango
+                }
+                return sum;
+            }, 0),
         );
         maxValue = Math.max(...stackedSums);
     } else {
-        maxValue = Math.max(...data.map((d) => Math.max(...Object.values(d).filter((v) => typeof v === 'number'))));
+        maxValue = Math.max(
+            ...data.map((d) =>
+                Math.max(
+                    ...Object.values(d).map((v) => {
+                        if (typeof v === 'number') {
+                            return v;
+                        } else if (Array.isArray(v)) {
+                            return Math.max(...v); // Usar el valor máximo del rango
+                        }
+                        return -Infinity; // Valor por defecto si no es ni número ni array
+                    }),
+                ),
+            ),
+        );
     }
 
     const magnitude = Math.pow(10, Math.floor(Math.log10(maxValue)));
-
-    // Ajuste para redondeo más preciso
     const factor = maxValue / magnitude;
 
     if (factor <= 1.5) {
@@ -27,7 +67,17 @@ export const roundMaxValue = (data: ChartData, stacked: boolean = false): number
         maxValue = 10 * magnitude;
     }
 
-    return Math.ceil(maxValue);
+    maxValue = Math.ceil(maxValue);
+
+    // Asegurar que el valor mínimo y máximo sean simétricos
+    if (minValue < 0) {
+        minValue = -maxValue;
+    }
+
+    return {
+        maxValue: maxValue,
+        minValue: minValue,
+    };
 };
 
 export const parseGap = (gap: string | number, totalSize: number): number => {
diff --git a/src/CartesianGrid/index.tsx b/src/CartesianGrid/index.tsx
index ae891ff..4d9df31 100644
--- a/src/CartesianGrid/index.tsx
+++ b/src/CartesianGrid/index.tsx
@@ -4,6 +4,8 @@ interface CartesianGridProps {
     width?: number;
     height?: number;
     strokeDasharray?: string;
+    maxValue?: number;
+    minValue?: number;
     layout?: 'horizontal' | 'vertical';
 }
 
@@ -11,37 +13,43 @@ const CartesianGrid = ({
     width = 0,
     height = 0,
     strokeDasharray = '3 3',
+    maxValue = 0,
+    minValue = 0,
     layout = 'horizontal',
-}: CartesianGridProps) => (
-    <g className='cartesian-grid'>
-        {layout === 'horizontal'
-            ? new Array(6)
-                  .fill(null)
-                  .map((_, index) => (
-                      <line
-                          key={uuidv4()}
-                          x1='0'
-                          y1={(index * height) / 5}
-                          x2={width}
-                          y2={(index * height) / 5}
-                          strokeDasharray={strokeDasharray}
-                          stroke='grey'
-                      />
-                  ))
-            : new Array(6)
-                  .fill(null)
-                  .map((_, index) => (
-                      <line
-                          key={uuidv4()}
-                          x1={(index * width) / 5}
-                          y1='0'
-                          x2={(index * width) / 5}
-                          y2={height}
-                          strokeDasharray={strokeDasharray}
-                          stroke='grey'
-                      />
-                  ))}
-    </g>
-);
+}: CartesianGridProps) => {
+    const numLines = minValue < 0 ? 11 : 6; // 5 lines for negative values, 5 for positive, and 1 for zero
+
+    return (
+        <g className='cartesian-grid'>
+            {layout === 'horizontal'
+                ? new Array(numLines)
+                      .fill(null)
+                      .map((_, index) => (
+                          <line
+                              key={uuidv4()}
+                              x1='0'
+                              y1={(index * height) / (numLines - 1)}
+                              x2={width}
+                              y2={(index * height) / (numLines - 1)}
+                              strokeDasharray={strokeDasharray}
+                              stroke='grey'
+                          />
+                      ))
+                : new Array(numLines)
+                      .fill(null)
+                      .map((_, index) => (
+                          <line
+                              key={uuidv4()}
+                              x1={(index * width) / (numLines - 1)}
+                              y1='0'
+                              x2={(index * width) / (numLines - 1)}
+                              y2={height}
+                              strokeDasharray={strokeDasharray}
+                              stroke='grey'
+                          />
+                      ))}
+        </g>
+    );
+};
 
 export default CartesianGrid;
diff --git a/src/XAxis/index.tsx b/src/XAxis/index.tsx
index 8045e87..a0f824b 100644
--- a/src/XAxis/index.tsx
+++ b/src/XAxis/index.tsx
@@ -6,6 +6,7 @@ interface XAxisProps {
     height?: number;
     dataKey?: string;
     maxValue?: number;
+    minValue?: number;
     layout?: 'horizontal' | 'vertical';
 }
 
@@ -15,12 +16,21 @@ const XAxis = ({
     height = 0,
     dataKey = 'name',
     maxValue = 0,
+    minValue = 0,
     layout = 'horizontal',
-}: XAxisProps) => (
-    <>
-        {layout === 'horizontal' ? (
-            <g className='x-axis'>
-                {data.map((entry, index) => (
+}: XAxisProps) => {
+    const positiveLines = 5;
+    const negativeLines = minValue < 0 ? 5 : 0;
+    const totalLines = minValue < 0 ? 10 : positiveLines;
+
+    const positiveRange = maxValue / positiveLines;
+    const negativeRange = minValue < 0 ? Math.abs(minValue) / negativeLines : 0;
+
+    return (
+        <g className='x-axis'>
+            {layout === 'horizontal' ? (
+                // Render axis for horizontal layout (categories)
+                data.map((entry, index) => (
                     <text
                         key={uuidv4()}
                         x={(index + 0.5) * (width / data.length)}
@@ -30,27 +40,45 @@ const XAxis = ({
                     >
                         {entry[dataKey]}
                     </text>
-                ))}
-            </g>
-        ) : (
-            <g className='x-axis'>
-                {new Array(6).fill(null).map((_, index) => {
-                    const value = (maxValue / 5) * index;
-                    return (
-                        <text
-                            key={uuidv4()}
-                            x={(index * width) / 5}
-                            y={height + height * 0.02}
-                            textAnchor='middle'
-                            dominantBaseline='hanging'
-                        >
-                            {value}
-                        </text>
-                    );
-                })}
-            </g>
-        )}
-    </>
-);
+                ))
+            ) : (
+                // Render axis for vertical layout (values)
+                <>
+                    {minValue < 0 &&
+                        // Render negative values
+                        new Array(negativeLines).fill(null).map((_, index) => {
+                            const value = -negativeRange * (negativeLines - index);
+                            return (
+                                <text
+                                    key={uuidv4()}
+                                    x={(index * width) / totalLines}
+                                    y={height + height * 0.02}
+                                    textAnchor='middle'
+                                    dominantBaseline='hanging'
+                                >
+                                    {value.toFixed(2)}
+                                </text>
+                            );
+                        })}
+
+                    {new Array(positiveLines + 1).fill(null).map((_, index) => {
+                        const value = positiveRange * index;
+                        return (
+                            <text
+                                key={uuidv4()}
+                                x={((index + negativeLines) * width) / totalLines}
+                                y={height + height * 0.02}
+                                textAnchor='middle'
+                                dominantBaseline='hanging'
+                            >
+                                {value.toFixed(2)}
+                            </text>
+                        );
+                    })}
+                </>
+            )}
+        </g>
+    );
+};
 
 export default XAxis;
diff --git a/src/YAxis/index.tsx b/src/YAxis/index.tsx
index c731606..8413c19 100644
--- a/src/YAxis/index.tsx
+++ b/src/YAxis/index.tsx
@@ -4,39 +4,71 @@ interface YAxisProps {
     data?: Array<{ [key: string]: any }>;
     height?: number;
     maxValue?: number;
+    minValue?: number;
     width?: number;
     layout?: 'horizontal' | 'vertical';
 }
 
-const YAxis = ({ data = [], height = 0, width = 0, maxValue = 0, layout = 'horizontal' }: YAxisProps) => (
-    <g className='y-axis'>
-        {layout === 'horizontal'
-            ? new Array(6).fill(null).map((_, index) => {
-                  const value = (maxValue / 5) * index;
-                  return (
-                      <text
-                          key={uuidv4()}
-                          x={-10}
-                          y={height - (index * height) / 5}
-                          textAnchor='end'
-                          dominantBaseline='middle'
-                      >
-                          {value}
-                      </text>
-                  );
-              })
-            : data.map((entry, index) => (
-                  <text
-                      key={uuidv4()}
-                      x={-10}
-                      y={(index + 0.5) * (height / data.length)}
-                      textAnchor='end'
-                      dominantBaseline='middle'
-                  >
-                      {entry.name}
-                  </text>
-              ))}
-    </g>
-);
+const YAxis = ({ data = [], height = 0, width = 0, maxValue = 0, minValue = 0, layout = 'horizontal' }: YAxisProps) => {
+    const positiveLines = 5;
+    const negativeLines = minValue < 0 ? 5 : 0;
+    const totalLines = minValue < 0 ? 10 : positiveLines;
+
+    const positiveRange = maxValue / positiveLines;
+    const negativeRange = minValue < 0 ? Math.abs(minValue) / negativeLines : 0;
+
+    return (
+        <g className='y-axis'>
+            {layout === 'horizontal' &&
+                minValue < 0 &&
+                // Render negative values
+                new Array(negativeLines).fill(null).map((_, index) => {
+                    const value = -negativeRange * (negativeLines - index);
+                    return (
+                        <text
+                            key={uuidv4()}
+                            x={-10}
+                            y={height - (index * height) / totalLines}
+                            textAnchor='end'
+                            dominantBaseline='middle'
+                        >
+                            {value.toFixed(2)}
+                        </text>
+                    );
+                })}
+
+            {layout === 'horizontal' &&
+                // Render positive values
+                new Array(positiveLines + 1).fill(null).map((_, index) => {
+                    const value = positiveRange * index;
+                    const yOffset = minValue < 0 ? negativeLines : 0;
+                    return (
+                        <text
+                            key={uuidv4()}
+                            x={-10}
+                            y={height - ((index + negativeLines) * height) / totalLines}
+                            textAnchor='end'
+                            dominantBaseline='middle'
+                        >
+                            {value.toFixed(2)}
+                        </text>
+                    );
+                })}
+
+            {layout !== 'horizontal' &&
+                data.map((entry, index) => (
+                    <text
+                        key={uuidv4()}
+                        x={-10}
+                        y={(index + 0.5) * (height / data.length)}
+                        textAnchor='end'
+                        dominantBaseline='middle'
+                    >
+                        {entry.name}
+                    </text>
+                ))}
+        </g>
+    );
+};
 
 export default YAxis;
diff --git a/src/constants.ts b/src/constants.ts
index c69aec1..6941ade 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -5,4 +5,5 @@ export const DEFAULT_BAR_CATEGORY_GAP = '10%';
 export const DEFAULT_BAR_GAP = 4;
 export const DEFAULT_LAYOUT: 'horizontal' | 'vertical' = 'horizontal';
 
-export type ChartData = Array<{ name: string; [key: string]: any }>;
+// Definición actualizada de ChartData
+export type ChartData = Array<Record<string, any>>;