diff --git a/src/components/reusable/AnalyticsChart.tsx b/src/components/reusable/AnalyticsChart.tsx
index 66089bc..e9b1e47 100644
--- a/src/components/reusable/AnalyticsChart.tsx
+++ b/src/components/reusable/AnalyticsChart.tsx
@@ -91,12 +91,22 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
           chartType = 3; // Pie
         } else if (lowerKey.includes('route')) {
           chartType = 4; // Donut
+        } else if (lowerKey.includes('calls')) {
+          chartType = 6; // Horizontal Bar
         } else if (lowerKey.includes('brand') || lowerKey.includes('product')) {
           chartType = 5; // Table
         } else if (lowerKey.includes('monthly') || lowerKey.includes('yearly')) {
           chartType = 0; // Bar
         }
 
+        if (chartType === 6) {
+          finalData.sort((a, b) => {
+            const aVal = hasSeries ? a[seriesKeys[0]] || 0 : a.value || 0;
+            const bVal = hasSeries ? b[seriesKeys[0]] || 0 : b.value || 0;
+            return aVal - bVal;
+          });
+        }
+
         // Determine if it should span full width
         const isFullWidth = (gridCols === 1) || (!gridCols && charts.length <= 2) || hasSeries || lowerKey.includes('monthly') || lowerKey.includes('yearly') || finalData.length > 8;
         
@@ -104,37 +114,65 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
 
         const minChartWidth = 100;
 
-        const renderChartContent = () => {
+        const renderChartContent = (isHorizontal = false) => {
           return (
             <>
               <defs>
-                <linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2="0" y2="1">
+                <linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2={isHorizontal ? "1" : "0"} y2={isHorizontal ? "0" : "1"}>
                   <stop offset="0%" stopColor="#1F4D36" stopOpacity={1} />
                   <stop offset="100%" stopColor="#1F4D36" stopOpacity={0.6} />
                 </linearGradient>
-                <linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2="0" y2="1">
+                <linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2={isHorizontal ? "1" : "0"} y2={isHorizontal ? "0" : "1"}>
                   <stop offset="0%" stopColor="#3B82F6" stopOpacity={1} />
                   <stop offset="100%" stopColor="#3B82F6" stopOpacity={0.6} />
                 </linearGradient>
               </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
-              <XAxis 
-                dataKey="dimension" 
-                axisLine={false}
-                tickLine={false}
-                tick={{ fontSize: 11, fill: '#64748B', angle: -45, textAnchor: 'end' }}
-                interval={0}
-                dy={10}
-                dx={-5}
-                height={90}
-              />
-              <YAxis 
-                axisLine={false}
-                tickLine={false}
-                tick={{ fontSize: 12, fill: '#64748B' }}
-                allowDecimals={false}
-                width={40}
-              />
+              <CartesianGrid strokeDasharray="3 3" vertical={!isHorizontal} horizontal={isHorizontal} stroke="#E2E8F0" />
+              {isHorizontal ? (
+                <>
+                  <XAxis type="number" hide />
+                  <YAxis 
+                    dataKey="dimension" 
+                    type="category"
+                    axisLine={false}
+                    tickLine={false}
+                    tick={{ fontSize: 12, fill: '#64748B' }}
+                    width={85}
+                    interval={0}
+                    tickFormatter={(text) => {
+                      if (typeof text === 'string' && text.length > 14) {
+                        return `${text.substring(0, 14)}...`;
+                      }
+                      return text;
+                    }}
+                  />
+                </>
+              ) : (
+                <>
+                  <XAxis 
+                    dataKey="dimension" 
+                    axisLine={false}
+                    tickLine={false}
+                    tick={{ fontSize: 11, fill: '#64748B', textAnchor: 'middle' }}
+                    interval={0}
+                    dy={10}
+                    height={40}
+                    tickFormatter={(text) => {
+                      if (typeof text === 'string' && text.length > 14) {
+                        return `${text.substring(0, 14)}...`;
+                      }
+                      return text;
+                    }}
+                  />
+                  <YAxis 
+                    axisLine={false}
+                    tickLine={false}
+                    tick={{ fontSize: 12, fill: '#64748B' }}
+                    allowDecimals={false}
+                    width={70}
+                  />
+                </>
+              )}
               <Tooltip 
                 cursor={{ fill: '#F8FAFC', stroke: '#E2E8F0', strokeWidth: 1, strokeDasharray: '3 3' }}
                 contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
@@ -179,7 +217,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                       dataKey={key} 
                       name={hasSeries ? key : "Value"}
                       fill={barFill} 
-                      radius={[4, 4, 0, 0]}
+                      radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
                       maxBarSize={40}
                     />
                   );
@@ -245,16 +283,20 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                         </Pie>
                       </PieChart>
                     ) : chartType === 1 ? (
-                      <LineChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
-                        {renderChartContent()}
+                      <LineChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                        {renderChartContent(false)}
                       </LineChart>
                     ) : chartType === 2 ? (
-                      <AreaChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
-                        {renderChartContent()}
+                      <AreaChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                        {renderChartContent(false)}
                       </AreaChart>
+                    ) : chartType === 6 ? (
+                      <BarChart layout="vertical" data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                        {renderChartContent(true)}
+                      </BarChart>
                     ) : (
-                      <BarChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
-                        {renderChartContent()}
+                      <BarChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
+                        {renderChartContent(false)}
                       </BarChart>
                     )}
                   </ResponsiveContainer>