<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:media="http://search.yahoo.com/mrss/" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
  <channel>
    <title>Business Recorder - Business &amp; Finance</title>
    <link>https://urdu.brecorder.com/</link>
    <description>Business Recorder</description>
    <language>en-Us</language>
    <copyright>Copyright 2026</copyright>
    <pubDate>Thu, 01 Oct 2026 20:46:28 +0500</pubDate>
    <lastBuildDate>Thu, 01 Oct 2026 20:46:28 +0500</lastBuildDate>
    <ttl>60</ttl>
    <item xmlns:default="http://purl.org/rss/1.0/modules/content/">
      <title>ستمبر کے دوران مہنگائی کی شرح 10.3 فیصد ریکارڈ</title>
      <link>https://urdu.brecorder.com/news/40291973/</link>
      <description>&lt;iframe id="raw-html-6abe27f6c294c" class="raw-html-embed" style="width: 100%; min-height: 50px; max-height: 30000px; border: none; overflow: hidden;" scrolling="no" srcdoc="&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;style&amp;gt;
        body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; overflow-wrap: anywhere; }
    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    
&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;
    &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt;
    &amp;lt;title&amp;gt;Headline Inflation Dashboard&amp;lt;/title&amp;gt;
    &amp;lt;!-- Include Google Fonts --&amp;gt;
    &amp;lt;link href=&amp;quot;https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;amp;display=swap&amp;quot; rel=&amp;quot;stylesheet&amp;quot;&amp;gt;
    &amp;lt;!-- Include Tailwind CSS --&amp;gt;
    &amp;lt;script src=&amp;quot;https://cdn.tailwindcss.com&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;!-- Include Chart.js &amp;amp; Plugins --&amp;gt;
    &amp;lt;script src=&amp;quot;https://cdn.jsdelivr.net/npm/chart.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script src=&amp;quot;https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
    
    &amp;lt;style&amp;gt;
        /* 1. Global Reset &amp;amp; Font Overrides */
        *, ::before, ::after {
            box-sizing: border-box;
        }
        
        body {
            font-family: &amp;#039;Plus Jakarta Sans&amp;#039;, sans-serif;
            background-color: #f8fafc;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        /* 2. Main Dashboard Card Container */
        .dashboard-card {
            width: 100%;
            max-width: 1000px;
            height: 720px;
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
            border: 1px solid #f1f5f9;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* 3. Header Styling */
        .header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f1f5f9;
            flex-shrink: 0;
        }

        .header-title-container span {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        .header-title-container h2 {
            margin: 2px 0 0 0;
            font-size: 20px;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.02em;
        }

        /* Controls Area */
        .controls-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Color Palette Dots */
        .theme-selector {
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: #f8fafc;
            padding: 4px;
            border-radius: 8px;
            border: 1px solid #f1f5f9;
        }

        .theme-dot {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            border: 2px solid #ffffff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .theme-dot:hover {
            transform: scale(1.1);
        }

        .theme-dot.active {
            box-shadow: 0 0 0 2px #cbd5e1;
        }

        /* Chart Type Switcher */
        .chart-toggle {
            display: flex;
            background-color: #f8fafc;
            border: 1px solid #f1f5f9;
            padding: 4px;
            border-radius: 8px;
        }

        .toggle-btn {
            background: none;
            border: none;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .toggle-btn.active {
            background-color: #ffffff;
            color: #0f172a;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            font-weight: 700;
        }

        /* 4. KPI Stat Row */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 12px 0;
            flex-shrink: 0;
        }

        .stat-card {
            background-color: rgba(248, 250, 252, 0.6);
            border: 1px solid rgba(241, 245, 249, 0.9);
            border-radius: 12px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .stat-card span.label {
            font-size: 9px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stat-card .value-container {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-top: 6px;
        }

        .stat-card span.value {
            font-size: 20px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
        }

        .stat-card span.badge {
            font-size: 9px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            line-height: 1;
        }

        .badge-red { background-color: #fff1f2; color: #f43f5e; }
        .badge-green { background-color: #f0fdf4; color: #16a34a; }
        .badge-gray { background-color: #f1f5f9; color: #64748b; }

        /* 5. Filters Tabs Row */
        .filters-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f1f5f9;
            overflow-x: auto;
            flex-shrink: 0;
        }

        .filters-row::-webkit-scrollbar {
            display: none;
        }

        .filter-btn {
            background: none;
            border: none;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .filter-btn:hover {
            background-color: #f1f5f9;
            color: #0f172a;
        }

        .filter-btn.active {
            background-color: #0f172a;
            color: #ffffff;
            font-weight: 700;
        }

        /* 6. Elastic Chart Area */
        .chart-wrapper {
            position: relative;
            width: 100%;
            flex-grow: 1;
            min-height: 0;
            margin-top: 10px;
        }

        .chart-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;

    &amp;lt;!-- Main Card Container --&amp;gt;
    &amp;lt;div class=&amp;quot;dashboard-card&amp;quot;&amp;gt;
        
        &amp;lt;!-- Header Section --&amp;gt;
        &amp;lt;div class=&amp;quot;header-row&amp;quot;&amp;gt;
            &amp;lt;div class=&amp;quot;header-title-container&amp;quot;&amp;gt;
                &amp;lt;span&amp;gt;Macroeconomic Indicators&amp;lt;/span&amp;gt;
                &amp;lt;h2&amp;gt;Headline Inflation YoY&amp;lt;/h2&amp;gt;
            &amp;lt;/div&amp;gt;
            
            &amp;lt;div class=&amp;quot;controls-group&amp;quot;&amp;gt;
                &amp;lt;!-- Theme Selectors --&amp;gt;
                &amp;lt;div class=&amp;quot;theme-selector&amp;quot;&amp;gt;
                    &amp;lt;button onclick=&amp;quot;changeTheme(&amp;#039;orange&amp;#039;, &amp;#039;#ea580c&amp;#039;)&amp;quot; id=&amp;quot;btn-theme-orange&amp;quot; class=&amp;quot;theme-dot active&amp;quot; style=&amp;quot;background-color: #ea580c;&amp;quot; title=&amp;quot;Orange Theme&amp;quot;&amp;gt;&amp;lt;/button&amp;gt;
                    &amp;lt;button onclick=&amp;quot;changeTheme(&amp;#039;indigo&amp;#039;, &amp;#039;#4f46e5&amp;#039;)&amp;quot; id=&amp;quot;btn-theme-indigo&amp;quot; class=&amp;quot;theme-dot&amp;quot; style=&amp;quot;background-color: #4f46e5;&amp;quot; title=&amp;quot;Indigo Theme&amp;quot;&amp;gt;&amp;lt;/button&amp;gt;
                    &amp;lt;button onclick=&amp;quot;changeTheme(&amp;#039;emerald&amp;#039;, &amp;#039;#059669&amp;#039;)&amp;quot; id=&amp;quot;btn-theme-emerald&amp;quot; class=&amp;quot;theme-dot&amp;quot; style=&amp;quot;background-color: #059669;&amp;quot; title=&amp;quot;Emerald Theme&amp;quot;&amp;gt;&amp;lt;/button&amp;gt;
                    &amp;lt;button onclick=&amp;quot;changeTheme(&amp;#039;rose&amp;#039;, &amp;#039;#e11d48&amp;#039;)&amp;quot; id=&amp;quot;btn-theme-rose&amp;quot; class=&amp;quot;theme-dot&amp;quot; style=&amp;quot;background-color: #e11d48;&amp;quot; title=&amp;quot;Rose Theme&amp;quot;&amp;gt;&amp;lt;/button&amp;gt;
                &amp;lt;/div&amp;gt;

                &amp;lt;!-- Bar / Line Switches --&amp;gt;
                &amp;lt;div class=&amp;quot;chart-toggle&amp;quot;&amp;gt;
                    &amp;lt;button id=&amp;quot;btn-type-bar&amp;quot; onclick=&amp;quot;setChartType(&amp;#039;bar&amp;#039;)&amp;quot; class=&amp;quot;toggle-btn active&amp;quot;&amp;gt;Bar&amp;lt;/button&amp;gt;
                    &amp;lt;button id=&amp;quot;btn-type-line&amp;quot; onclick=&amp;quot;setChartType(&amp;#039;line&amp;#039;)&amp;quot; class=&amp;quot;toggle-btn&amp;quot;&amp;gt;Line&amp;lt;/button&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Metric Summaries --&amp;gt;
        &amp;lt;div class=&amp;quot;stats-grid&amp;quot;&amp;gt;
            &amp;lt;div class=&amp;quot;stat-card&amp;quot;&amp;gt;
                &amp;lt;span class=&amp;quot;label&amp;quot;&amp;gt;Peak Inflation&amp;lt;/span&amp;gt;
                &amp;lt;div class=&amp;quot;value-container&amp;quot;&amp;gt;
                    &amp;lt;span id=&amp;quot;stat-peak-val&amp;quot; class=&amp;quot;value&amp;quot;&amp;gt;28.3%&amp;lt;/span&amp;gt;
                    &amp;lt;span id=&amp;quot;stat-peak-date&amp;quot; class=&amp;quot;badge badge-red&amp;quot;&amp;gt;Jan-24&amp;lt;/span&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&amp;quot;stat-card&amp;quot;&amp;gt;
                &amp;lt;span class=&amp;quot;label&amp;quot;&amp;gt;Lowest Point&amp;lt;/span&amp;gt;
                &amp;lt;div class=&amp;quot;value-container&amp;quot;&amp;gt;
                    &amp;lt;span id=&amp;quot;stat-low-val&amp;quot; class=&amp;quot;value&amp;quot;&amp;gt;0.3%&amp;lt;/span&amp;gt;
                    &amp;lt;span id=&amp;quot;stat-low-date&amp;quot; class=&amp;quot;badge badge-green&amp;quot;&amp;gt;Apr-25&amp;lt;/span&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&amp;quot;stat-card&amp;quot;&amp;gt;
                &amp;lt;span class=&amp;quot;label&amp;quot;&amp;gt;Latest Rate&amp;lt;/span&amp;gt;
                &amp;lt;div class=&amp;quot;value-container&amp;quot;&amp;gt;
                    &amp;lt;!-- Updated with Sep-26 Data Point here in HTML as default fallback --&amp;gt;
                    &amp;lt;span id=&amp;quot;stat-latest-val&amp;quot; class=&amp;quot;value&amp;quot;&amp;gt;10.3%&amp;lt;/span&amp;gt;
                    &amp;lt;span id=&amp;quot;stat-latest-date&amp;quot; class=&amp;quot;badge badge-gray&amp;quot;&amp;gt;Sep-26&amp;lt;/span&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Filters Tabs --&amp;gt;
        &amp;lt;div class=&amp;quot;filters-row&amp;quot;&amp;gt;
            &amp;lt;button onclick=&amp;quot;filterByYear(&amp;#039;all&amp;#039;)&amp;quot; id=&amp;quot;filter-all&amp;quot; class=&amp;quot;filter-btn active&amp;quot;&amp;gt;All Months&amp;lt;/button&amp;gt;
            &amp;lt;button onclick=&amp;quot;filterByYear(&amp;#039;2024&amp;#039;)&amp;quot; id=&amp;quot;filter-2024&amp;quot; class=&amp;quot;filter-btn&amp;quot;&amp;gt;2024&amp;lt;/button&amp;gt;
            &amp;lt;button onclick=&amp;quot;filterByYear(&amp;#039;2025&amp;#039;)&amp;quot; id=&amp;quot;filter-2025&amp;quot; class=&amp;quot;filter-btn&amp;quot;&amp;gt;2025&amp;lt;/button&amp;gt;
            &amp;lt;button onclick=&amp;quot;filterByYear(&amp;#039;2026&amp;#039;)&amp;quot; id=&amp;quot;filter-2026&amp;quot; class=&amp;quot;filter-btn&amp;quot;&amp;gt;2026&amp;lt;/button&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Absolute Protected Chart Canvas Area --&amp;gt;
        &amp;lt;div class=&amp;quot;chart-wrapper&amp;quot;&amp;gt;
            &amp;lt;canvas id=&amp;quot;inflationChart&amp;quot; class=&amp;quot;chart-canvas&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;
        &amp;lt;/div&amp;gt;
        
    &amp;lt;/div&amp;gt;

    &amp;lt;script&amp;gt;
        // Register the DataLabels plugin
        Chart.register(ChartDataLabels);

        const ctx = document.getElementById(&amp;#039;inflationChart&amp;#039;).getContext(&amp;#039;2d&amp;#039;);

        // Core State
        let currentThemeColor = &amp;#039;#ea580c&amp;#039;; 
        let currentThemeName = &amp;#039;orange&amp;#039;;
        let currentChartType = &amp;#039;bar&amp;#039;;
        let currentYearFilter = &amp;#039;all&amp;#039;;

        // Full Data Sets - Updated with September 2026 (Sep-26: 10.3%)
        const allLabels = [
            &amp;quot;Jan-24&amp;quot;, &amp;quot;Feb-24&amp;quot;, &amp;quot;Mar-24&amp;quot;, &amp;quot;Apr-24&amp;quot;, &amp;quot;May-24&amp;quot;, &amp;quot;Jun-24&amp;quot;, &amp;quot;Jul-24&amp;quot;, &amp;quot;Aug-24&amp;quot;, &amp;quot;Sep-24&amp;quot;, &amp;quot;Oct-24&amp;quot;, &amp;quot;Nov-24&amp;quot;, &amp;quot;Dec-24&amp;quot;,
            &amp;quot;Jan-25&amp;quot;, &amp;quot;Feb-25&amp;quot;, &amp;quot;Mar-25&amp;quot;, &amp;quot;Apr-25&amp;quot;, &amp;quot;May-25&amp;quot;, &amp;quot;Jun-25&amp;quot;, &amp;quot;Jul-25&amp;quot;, &amp;quot;Aug-25&amp;quot;, &amp;quot;Sep-25&amp;quot;, &amp;quot;Oct-25&amp;quot;, &amp;quot;Nov-25&amp;quot;, &amp;quot;Dec-25&amp;quot;,
            &amp;quot;Jan-26&amp;quot;, &amp;quot;Feb-26&amp;quot;, &amp;quot;Mar-26&amp;quot;, &amp;quot;Apr-26&amp;quot;, &amp;quot;May-26&amp;quot;, &amp;quot;Jun-26&amp;quot;, &amp;quot;Jul-26&amp;quot;, &amp;quot;Aug-26&amp;quot;, &amp;quot;Sep-26&amp;quot;
        ];
        const allDataValues = [
            28.3, 23.1, 20.7, 17.3, 11.8, 12.6, 11.1, 9.6, 6.9, 7.2, 4.9, 4.1,
            2.4, 1.5, 0.7, 0.3, 3.5, 3.2, 4.1, 3.0, 5.6, 6.2, 6.1, 5.6,
            5.8, 7.0, 7.3, 10.9, 11.7, 11.1, 9.2, 11.1, 10.3
        ];

        // Chart defaults
        Chart.defaults.font.family = &amp;quot;&amp;#039;Plus Jakarta Sans&amp;#039;, sans-serif&amp;quot;;
        Chart.defaults.color = &amp;#039;#94a3b8&amp;#039;;

        // Initialize Chart.js
        let inflationChart = new Chart(ctx, {
            type: currentChartType,
            data: {
                labels: [...allLabels],
                datasets: [{
                    label: &amp;#039;Inflation (%)&amp;#039;,
                    data: [...allDataValues],
                    backgroundColor: currentThemeColor,
                    borderColor: currentThemeColor,
                    borderWidth: currentChartType === &amp;#039;line&amp;#039; ? 3 : 0,
                    fill: currentChartType === &amp;#039;line&amp;#039; ? { target: &amp;#039;origin&amp;#039;, above: &amp;#039;rgba(234, 88, 12, 0.05)&amp;#039; } : false,
                    borderRadius: 5,
                    borderSkipped: false,
                    barPercentage: 0.7,
                    categoryPercentage: 0.85,
                    tension: 0.35, 
                    pointBackgroundColor: &amp;#039;#ffffff&amp;#039;,
                    pointBorderColor: currentThemeColor,
                    pointBorderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: &amp;#039;rgba(15, 23, 42, 0.95)&amp;#039;,
                        titleFont: { size: 10, weight: &amp;#039;700&amp;#039; },
                        bodyFont: { size: 11, weight: &amp;#039;700&amp;#039; },
                        padding: 8,
                        cornerRadius: 8,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return `Rate: ${context.parsed.y}%`;
                            }
                        }
                    },
                    datalabels: {
                        display: function() {
                            return currentYearFilter !== &amp;#039;all&amp;#039;;
                        },
                        anchor: &amp;#039;end&amp;#039;,
                        align: &amp;#039;top&amp;#039;,
                        offset: 2,
                        formatter: function(value) {
                            return value.toFixed(1) + &amp;#039;%&amp;#039;;
                        },
                        font: {
                            weight: &amp;#039;700&amp;#039;,
                            size: 9
                        },
                        color: function() {
                            return currentThemeColor;
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            font: { size: 8, weight: &amp;#039;600&amp;#039; },
                            maxRotation: 0,
                            autoSkip: true,
                            maxTicksLimit: 12
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: &amp;#039;#f1f5f9&amp;#039;,
                            drawBorder: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            padding: 6,
                            font: { size: 8.5, weight: &amp;#039;500&amp;#039; },
                            callback: function(value) {
                                return value + &amp;#039;%&amp;#039;;
                            }
                        },
                        border: {
                            display: false
                        }
                    }
                },
                animation: {
                    duration: 1200,
                    easing: &amp;#039;easeOutQuart&amp;#039;
                }
            }
        });

        // Function to update summary metrics box
        function updateStats(filteredLabels, filteredData) {
            if (!filteredData || filteredData.length === 0) return;

            let maxVal = filteredData[0];
            let maxIndex = 0;
            let minVal = filteredData[0];
            let minIndex = 0;

            for (let i = 1; i &amp;lt; filteredData.length; i++) {
                if (filteredData[i] &amp;gt; maxVal) {
                    maxVal = filteredData[i];
                    maxIndex = i;
                }
                if (filteredData[i] &amp;lt; minVal) {
                    minVal = filteredData[i];
                    minIndex = i;
                }
            }

            const latestVal = filteredData[filteredData.length - 1];
            const latestLabel = filteredLabels[filteredLabels.length - 1];

            document.getElementById(&amp;#039;stat-peak-val&amp;#039;).innerText = maxVal.toFixed(1) + &amp;#039;%&amp;#039;;
            document.getElementById(&amp;#039;stat-peak-date&amp;#039;).innerText = filteredLabels[maxIndex];

            document.getElementById(&amp;#039;stat-low-val&amp;#039;).innerText = minVal.toFixed(1) + &amp;#039;%&amp;#039;;
            document.getElementById(&amp;#039;stat-low-date&amp;#039;).innerText = filteredLabels[minIndex];

            document.getElementById(&amp;#039;stat-latest-val&amp;#039;).innerText = latestVal.toFixed(1) + &amp;#039;%&amp;#039;;
            document.getElementById(&amp;#039;stat-latest-date&amp;#039;).innerText = latestLabel;
        }

        // Initialize initial metrics calculate on page load
        updateStats(allLabels, allDataValues);

        // Function to filter data by year tab
        function filterByYear(year) {
            currentYearFilter = year;
            
            [&amp;#039;all&amp;#039;, &amp;#039;2024&amp;#039;, &amp;#039;2025&amp;#039;, &amp;#039;2026&amp;#039;].forEach(y =&amp;gt; {
                const btn = document.getElementById(`filter-${y}`);
                if (y === year) {
                    btn.classList.add(&amp;#039;active&amp;#039;);
                } else {
                    btn.classList.remove(&amp;#039;active&amp;#039;);
                }
            });

            let newLabels = [];
            let newData = [];

            if (year === &amp;#039;all&amp;#039;) {
                newLabels = [...allLabels];
                newData = [...allDataValues];
            } else {
                const yearSuffix = year.substring(2); // Get &amp;quot;24&amp;quot;, &amp;quot;25&amp;quot;, &amp;quot;26&amp;quot;
                for (let i = 0; i &amp;lt; allLabels.length; i++) {
                    if (allLabels[i].endsWith(yearSuffix)) {
                        newLabels.push(allLabels[i]);
                        newData.push(allDataValues[i]);
                    }
                }
            }

            inflationChart.data.labels = newLabels;
            inflationChart.data.datasets[0].data = newData;
            
            updateStats(newLabels, newData);
            inflationChart.update();
        }

        // Function to change color themes
        function changeTheme(themeName, colorHex) {
            currentThemeColor = colorHex;
            currentThemeName = themeName;

            [&amp;#039;orange&amp;#039;, &amp;#039;indigo&amp;#039;, &amp;#039;emerald&amp;#039;, &amp;#039;rose&amp;#039;].forEach(t =&amp;gt; {
                const btn = document.getElementById(`btn-theme-${t}`);
                if (t === themeName) {
                    btn.classList.add(&amp;#039;active&amp;#039;);
                } else {
                    btn.classList.remove(&amp;#039;active&amp;#039;);
                }
            });

            inflationChart.data.datasets[0].backgroundColor = currentThemeColor;
            inflationChart.data.datasets[0].borderColor = currentThemeColor;
            inflationChart.data.datasets[0].pointBorderColor = currentThemeColor;

            if (currentChartType === &amp;#039;line&amp;#039;) {
                inflationChart.data.datasets[0].fill = {
                    target: &amp;#039;origin&amp;#039;,
                    above: `${currentThemeColor}0D`
                };
            }

            inflationChart.update();
        }

        // Function to switch Chart type (Bar vs Line)
        function setChartType(type) {
            currentChartType = type;

            const barBtn = document.getElementById(&amp;#039;btn-type-bar&amp;#039;);
            const lineBtn = document.getElementById(&amp;#039;btn-type-line&amp;#039;);

            if (type === &amp;#039;bar&amp;#039;) {
                barBtn.classList.add(&amp;#039;active&amp;#039;);
                lineBtn.classList.remove(&amp;#039;active&amp;#039;);
            } else {
                lineBtn.classList.add(&amp;#039;active&amp;#039;);
                barBtn.classList.remove(&amp;#039;active&amp;#039;);
            }

            inflationChart.destroy();
            
            const datasetConfig = {
                label: &amp;#039;Inflation (%)&amp;#039;,
                data: inflationChart.data.datasets[0].data,
                backgroundColor: currentThemeColor,
                borderColor: currentThemeColor,
                borderWidth: type === &amp;#039;line&amp;#039; ? 3 : 0,
                fill: type === &amp;#039;line&amp;#039; ? { target: &amp;#039;origin&amp;#039;, above: `${currentThemeColor}0D` } : false,
                borderRadius: type === &amp;#039;bar&amp;#039; ? 5 : 0,
                borderSkipped: false,
                barPercentage: 0.7,
                categoryPercentage: 0.85,
                tension: 0.35,
                pointBackgroundColor: &amp;#039;#ffffff&amp;#039;,
                pointBorderColor: currentThemeColor,
                pointBorderWidth: 2,
                pointRadius: type === &amp;#039;line&amp;#039; ? 3 : 0,
                pointHoverRadius: type === &amp;#039;line&amp;#039; ? 5 : 0
            };

            inflationChart = new Chart(ctx, {
                type: type,
                data: {
                    labels: inflationChart.data.labels,
                    datasets: [datasetConfig]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: &amp;#039;rgba(15, 23, 42, 0.95)&amp;#039;,
                            titleFont: { size: 10, weight: &amp;#039;700&amp;#039; },
                            bodyFont: { size: 11, weight: &amp;#039;700&amp;#039; },
                            padding: 8,
                            cornerRadius: 8,
                            displayColors: false,
                            callbacks: {
                                label: function(context) {
                                    return `Rate: ${context.parsed.y}%`;
                                }
                            }
                        },
                        datalabels: {
                            display: function() {
                                return currentYearFilter !== &amp;#039;all&amp;#039;;
                            },
                            anchor: &amp;#039;end&amp;#039;,
                            align: &amp;#039;top&amp;#039;,
                            offset: 2,
                            formatter: function(value) {
                                return value.toFixed(1) + &amp;#039;%&amp;#039;;
                            },
                            font: { weight: &amp;#039;700&amp;#039;, size: 9 },
                            color: function() { return currentThemeColor; }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 8, weight: &amp;#039;600&amp;#039; }, maxRotation: 0, autoSkip: true, maxTicksLimit: 12 }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { color: &amp;#039;#f1f5f9&amp;#039;, borderDash: [5, 5] },
                            ticks: {
                                padding: 6,
                                font: { size: 8.5, weight: &amp;#039;500&amp;#039; },
                                callback: function(value) { return value + &amp;#039;%&amp;#039;; }
                            },
                            border: { display: false }
                        }
                    }
                }
            });
        }
    &amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
    &amp;lt;script&amp;gt;
        function reportHeight() {
            var h = document.documentElement.scrollHeight;
            window.parent.postMessage({ type: &amp;#039;raw-html-resize&amp;#039;, id: &amp;#039;raw-html-6abe27f6c294c&amp;#039;, height: h }, &amp;#039;*&amp;#039;);
        }
        window.addEventListener(&amp;#039;load&amp;#039;, reportHeight);
        if (window.ResizeObserver) {
            new ResizeObserver(reportHeight).observe(document.body);
        }
    &amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;"&gt;&lt;/iframe&gt;
&lt;script&gt;
if (!window._rawHtmlListenerAttached) {
    window._rawHtmlListenerAttached = true;
    window.addEventListener('message', function(event) {
        if (event.data &amp;&amp; event.data.type === 'raw-html-resize' &amp;&amp; event.data.id) {
            var iframe = document.getElementById(event.data.id);
            if (iframe) {
                var height = Math.min(Math.max(event.data.height, 50), 30000);
                iframe.style.height = height + 'px';
            }
        }
    });
}
&lt;/script&gt;
&lt;p&gt;&lt;strong&gt;ستمبر 2026 کے دوران ہیڈ لائن مہنگائی سالانہ بنیاد پر 10.3 فیصد ریکارڈ کی گئی جو اگست کے 11.1 فیصد کے مقابلے میں کم ہے۔&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;ادارہ شماریات  کے مطابق ستمبر 2025 میں صارف قیمتوں کا اشاریہ (سی پی آئی) 5.6 فیصد ریکارڈ کیا گیا تھا۔&lt;/p&gt;
&lt;p&gt;ماہانہ بنیاد پر ستمبر 2026  کے دوران سی پی آئی میں 1.3 فیصد اضافہ ہوا جب کہ گزشتہ ماہ اس میں 1.2 فیصد اور ستمبر 2025 میں 2.1 فیصد اضافہ ریکارڈ کیا گیا تھا۔&lt;/p&gt;
&lt;p&gt;شہری علاقوں میں صارف قیمتوں کے اشاریے (سی پی آئی) پر مبنی افراطِ زر ستمبر 2026 میں سالانہ 10.1 فیصد بڑھا جبکہ گزشتہ ماہ یہ اضافہ 10.4 فیصد اور ستمبر 2025 میں 5.7 فیصد ریکارڈ کیا گیا تھا۔&lt;/p&gt;
&lt;p&gt;ماہانہ بنیاد پرستمبر 2026 میں سی پی آئی میں 1.3 فیصد اضافہ ہوا جبکہ گزشتہ ماہ اس میں 0.9 فیصد اور ستمبر 2025 میں 1.6 فیصد اضافہ ریکارڈ کیا گیا تھا۔&lt;/p&gt;
&lt;p&gt;دیہی علاقوں میں صارف قیمتوں کے اشاریے (سی پی آئی) پر مبنی افراطِ زر ستمبر 2026 میں سالانہ بنیاد پر 10.5 فیصد بڑھا جبکہ گزشتہ ماہ یہ اضافہ 12.2 فیصد اور ستمبر 2025 میں 5.9 فیصد ریکارڈ کیا گیا تھا۔&lt;/p&gt;
&lt;p&gt;ماہانہ بنیاد پر ستمبر 2026 میں سی پی آئی میں 1.2 فیصد اضافہ ہوا جبکہ گزشتہ ماہ اس میں 1.6 فیصد اور ستمبر 2025 میں 2.8 فیصد اضافہ ریکارڈ کیا گیا تھا۔&lt;/p&gt;
&lt;p&gt;مالی سال 2027  کی پہلی سہ ماہی کے دوران سی پی آئی پر مبنی افراطِ زر کی شرح 10.2 فیصد رہی جبکہ گزشتہ سال کی اسی مدت میں یہ شرح 4.3 فیصد تھی۔&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;حکومت کی توقعات&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;ایک روز قبل وزارتِ خزانہ  نے اپنی ماہانہ رپورٹ میں توقع ظاہر کی تھی کہ قلیل مدت میں افراطِ زر کی شرح بلند رہے گی جبکہ ہیڈ لائن صارف قیمتوں کے اشاریے پر مبنی افراطِ زر ستمبر 2026 میں 10 سے 11 فیصد رہنے کا تخمینہ لگایا گیا تھا۔ رپورٹ کے مطابق اس کے بعد افراطِ زر کی سمت کا انحصار بڑی حد تک عالمی سطح پر تیل کی قیمتوں پر ہوگا۔&lt;/p&gt;
&lt;p&gt;رپورٹ میں بتایا گیا کہ حکومت کے جاری اخراجات اور سود کی ادائیگیوں میں اضافے کے باعث جولائی 2026 میں مجموعی مالیاتی خسارہ 596.6 ارب روپے تک پہنچ گیا۔&lt;/p&gt;
&lt;p&gt;رپورٹ کے مطابق عالمی سطح پر بلند تیل کی قیمتیں معاشی منظرنامے کے لیے بدستور سب سے بڑا خطرہ ہیں جو قوت خرید، پیداواری لاگت اور درآمدی بل کو متاثر کررہی ہیں۔&lt;/p&gt;
&lt;p&gt;رپورٹ میں یہ بات نوٹ کی گئی کہ وزیرِ اعظم کا فیول ریلیف اسکیم پیٹرولیم لیوی میں کٹوتی کیے بغیر ایک ڈیجیٹل ترسیلی نظام کے ذریعے نچلے طبقے کے گھرانوں کو ریلیف فراہم کررہی ہے۔ رپورٹ کے مطابق اس سے مالیاتی نظم و ضبط کو برقرار رکھتے ہوئے قوتِ خرید کا تحفظ کیا جاتا ہے۔&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;ماہرین کی توقعات&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;قبل ازیں متعدد بروکریج ہاؤسز نے توقع ظاہر کی تھی کہ ستمبر کے دوران صارف قیمتوں میں افراطِ زر کم ہوکر تقریباً 10 فیصد رہ جائے گا، تاہم ایندھن اور بجلی کی بڑھتی لاگت سے قیمتوں پر دباؤ بلند رہنے کا امکان ہے جس سے مرکزی بینک کی زری پالیسی کے منظرنامے میں پیچیدگی پیدا ہوسکتی ہے۔&lt;/p&gt;
&lt;p&gt;ٹاپ لائن سیکیورٹیز، اسماعیل اقبال سیکیورٹیز، عباسی اینڈ کمپنی اور گروتھ سیکیورٹیز کے اندازوں کے مطابق، ستمبر میں افراطِ زر کی شرح سالانہ بنیاد پر 9.9 فیصد سے 10.5 فیصد کے درمیان رہنے کی توقع تھی۔&lt;/p&gt;
</description>
      <content:encoded xmlns="http://purl.org/rss/1.0/modules/content/"><![CDATA[<iframe id="raw-html-6abe27f6c294c" class="raw-html-embed" style="width: 100%; min-height: 50px; max-height: 30000px; border: none; overflow: hidden;" scrolling="no" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; overflow-wrap: anywhere; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Headline Inflation Dashboard&lt;/title&gt;
    &lt;!-- Include Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- Include Tailwind CSS --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- Include Chart.js &amp; Plugins --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels&quot;&gt;&lt;/script&gt;
    
    &lt;style&gt;
        /* 1. Global Reset &amp; Font Overrides */
        *, ::before, ::after {
            box-sizing: border-box;
        }
        
        body {
            font-family: &#039;Plus Jakarta Sans&#039;, sans-serif;
            background-color: #f8fafc;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        /* 2. Main Dashboard Card Container */
        .dashboard-card {
            width: 100%;
            max-width: 1000px;
            height: 720px;
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
            border: 1px solid #f1f5f9;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* 3. Header Styling */
        .header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f1f5f9;
            flex-shrink: 0;
        }

        .header-title-container span {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        .header-title-container h2 {
            margin: 2px 0 0 0;
            font-size: 20px;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.02em;
        }

        /* Controls Area */
        .controls-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Color Palette Dots */
        .theme-selector {
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: #f8fafc;
            padding: 4px;
            border-radius: 8px;
            border: 1px solid #f1f5f9;
        }

        .theme-dot {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            border: 2px solid #ffffff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .theme-dot:hover {
            transform: scale(1.1);
        }

        .theme-dot.active {
            box-shadow: 0 0 0 2px #cbd5e1;
        }

        /* Chart Type Switcher */
        .chart-toggle {
            display: flex;
            background-color: #f8fafc;
            border: 1px solid #f1f5f9;
            padding: 4px;
            border-radius: 8px;
        }

        .toggle-btn {
            background: none;
            border: none;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .toggle-btn.active {
            background-color: #ffffff;
            color: #0f172a;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            font-weight: 700;
        }

        /* 4. KPI Stat Row */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 12px 0;
            flex-shrink: 0;
        }

        .stat-card {
            background-color: rgba(248, 250, 252, 0.6);
            border: 1px solid rgba(241, 245, 249, 0.9);
            border-radius: 12px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .stat-card span.label {
            font-size: 9px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stat-card .value-container {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-top: 6px;
        }

        .stat-card span.value {
            font-size: 20px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
        }

        .stat-card span.badge {
            font-size: 9px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            line-height: 1;
        }

        .badge-red { background-color: #fff1f2; color: #f43f5e; }
        .badge-green { background-color: #f0fdf4; color: #16a34a; }
        .badge-gray { background-color: #f1f5f9; color: #64748b; }

        /* 5. Filters Tabs Row */
        .filters-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f1f5f9;
            overflow-x: auto;
            flex-shrink: 0;
        }

        .filters-row::-webkit-scrollbar {
            display: none;
        }

        .filter-btn {
            background: none;
            border: none;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .filter-btn:hover {
            background-color: #f1f5f9;
            color: #0f172a;
        }

        .filter-btn.active {
            background-color: #0f172a;
            color: #ffffff;
            font-weight: 700;
        }

        /* 6. Elastic Chart Area */
        .chart-wrapper {
            position: relative;
            width: 100%;
            flex-grow: 1;
            min-height: 0;
            margin-top: 10px;
        }

        .chart-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;!-- Main Card Container --&gt;
    &lt;div class=&quot;dashboard-card&quot;&gt;
        
        &lt;!-- Header Section --&gt;
        &lt;div class=&quot;header-row&quot;&gt;
            &lt;div class=&quot;header-title-container&quot;&gt;
                &lt;span&gt;Macroeconomic Indicators&lt;/span&gt;
                &lt;h2&gt;Headline Inflation YoY&lt;/h2&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;controls-group&quot;&gt;
                &lt;!-- Theme Selectors --&gt;
                &lt;div class=&quot;theme-selector&quot;&gt;
                    &lt;button onclick=&quot;changeTheme(&#039;orange&#039;, &#039;#ea580c&#039;)&quot; id=&quot;btn-theme-orange&quot; class=&quot;theme-dot active&quot; style=&quot;background-color: #ea580c;&quot; title=&quot;Orange Theme&quot;&gt;&lt;/button&gt;
                    &lt;button onclick=&quot;changeTheme(&#039;indigo&#039;, &#039;#4f46e5&#039;)&quot; id=&quot;btn-theme-indigo&quot; class=&quot;theme-dot&quot; style=&quot;background-color: #4f46e5;&quot; title=&quot;Indigo Theme&quot;&gt;&lt;/button&gt;
                    &lt;button onclick=&quot;changeTheme(&#039;emerald&#039;, &#039;#059669&#039;)&quot; id=&quot;btn-theme-emerald&quot; class=&quot;theme-dot&quot; style=&quot;background-color: #059669;&quot; title=&quot;Emerald Theme&quot;&gt;&lt;/button&gt;
                    &lt;button onclick=&quot;changeTheme(&#039;rose&#039;, &#039;#e11d48&#039;)&quot; id=&quot;btn-theme-rose&quot; class=&quot;theme-dot&quot; style=&quot;background-color: #e11d48;&quot; title=&quot;Rose Theme&quot;&gt;&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Bar / Line Switches --&gt;
                &lt;div class=&quot;chart-toggle&quot;&gt;
                    &lt;button id=&quot;btn-type-bar&quot; onclick=&quot;setChartType(&#039;bar&#039;)&quot; class=&quot;toggle-btn active&quot;&gt;Bar&lt;/button&gt;
                    &lt;button id=&quot;btn-type-line&quot; onclick=&quot;setChartType(&#039;line&#039;)&quot; class=&quot;toggle-btn&quot;&gt;Line&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Metric Summaries --&gt;
        &lt;div class=&quot;stats-grid&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;span class=&quot;label&quot;&gt;Peak Inflation&lt;/span&gt;
                &lt;div class=&quot;value-container&quot;&gt;
                    &lt;span id=&quot;stat-peak-val&quot; class=&quot;value&quot;&gt;28.3%&lt;/span&gt;
                    &lt;span id=&quot;stat-peak-date&quot; class=&quot;badge badge-red&quot;&gt;Jan-24&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;span class=&quot;label&quot;&gt;Lowest Point&lt;/span&gt;
                &lt;div class=&quot;value-container&quot;&gt;
                    &lt;span id=&quot;stat-low-val&quot; class=&quot;value&quot;&gt;0.3%&lt;/span&gt;
                    &lt;span id=&quot;stat-low-date&quot; class=&quot;badge badge-green&quot;&gt;Apr-25&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;span class=&quot;label&quot;&gt;Latest Rate&lt;/span&gt;
                &lt;div class=&quot;value-container&quot;&gt;
                    &lt;!-- Updated with Sep-26 Data Point here in HTML as default fallback --&gt;
                    &lt;span id=&quot;stat-latest-val&quot; class=&quot;value&quot;&gt;10.3%&lt;/span&gt;
                    &lt;span id=&quot;stat-latest-date&quot; class=&quot;badge badge-gray&quot;&gt;Sep-26&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Filters Tabs --&gt;
        &lt;div class=&quot;filters-row&quot;&gt;
            &lt;button onclick=&quot;filterByYear(&#039;all&#039;)&quot; id=&quot;filter-all&quot; class=&quot;filter-btn active&quot;&gt;All Months&lt;/button&gt;
            &lt;button onclick=&quot;filterByYear(&#039;2024&#039;)&quot; id=&quot;filter-2024&quot; class=&quot;filter-btn&quot;&gt;2024&lt;/button&gt;
            &lt;button onclick=&quot;filterByYear(&#039;2025&#039;)&quot; id=&quot;filter-2025&quot; class=&quot;filter-btn&quot;&gt;2025&lt;/button&gt;
            &lt;button onclick=&quot;filterByYear(&#039;2026&#039;)&quot; id=&quot;filter-2026&quot; class=&quot;filter-btn&quot;&gt;2026&lt;/button&gt;
        &lt;/div&gt;

        &lt;!-- Absolute Protected Chart Canvas Area --&gt;
        &lt;div class=&quot;chart-wrapper&quot;&gt;
            &lt;canvas id=&quot;inflationChart&quot; class=&quot;chart-canvas&quot;&gt;&lt;/canvas&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;

    &lt;script&gt;
        // Register the DataLabels plugin
        Chart.register(ChartDataLabels);

        const ctx = document.getElementById(&#039;inflationChart&#039;).getContext(&#039;2d&#039;);

        // Core State
        let currentThemeColor = &#039;#ea580c&#039;; 
        let currentThemeName = &#039;orange&#039;;
        let currentChartType = &#039;bar&#039;;
        let currentYearFilter = &#039;all&#039;;

        // Full Data Sets - Updated with September 2026 (Sep-26: 10.3%)
        const allLabels = [
            &quot;Jan-24&quot;, &quot;Feb-24&quot;, &quot;Mar-24&quot;, &quot;Apr-24&quot;, &quot;May-24&quot;, &quot;Jun-24&quot;, &quot;Jul-24&quot;, &quot;Aug-24&quot;, &quot;Sep-24&quot;, &quot;Oct-24&quot;, &quot;Nov-24&quot;, &quot;Dec-24&quot;,
            &quot;Jan-25&quot;, &quot;Feb-25&quot;, &quot;Mar-25&quot;, &quot;Apr-25&quot;, &quot;May-25&quot;, &quot;Jun-25&quot;, &quot;Jul-25&quot;, &quot;Aug-25&quot;, &quot;Sep-25&quot;, &quot;Oct-25&quot;, &quot;Nov-25&quot;, &quot;Dec-25&quot;,
            &quot;Jan-26&quot;, &quot;Feb-26&quot;, &quot;Mar-26&quot;, &quot;Apr-26&quot;, &quot;May-26&quot;, &quot;Jun-26&quot;, &quot;Jul-26&quot;, &quot;Aug-26&quot;, &quot;Sep-26&quot;
        ];
        const allDataValues = [
            28.3, 23.1, 20.7, 17.3, 11.8, 12.6, 11.1, 9.6, 6.9, 7.2, 4.9, 4.1,
            2.4, 1.5, 0.7, 0.3, 3.5, 3.2, 4.1, 3.0, 5.6, 6.2, 6.1, 5.6,
            5.8, 7.0, 7.3, 10.9, 11.7, 11.1, 9.2, 11.1, 10.3
        ];

        // Chart defaults
        Chart.defaults.font.family = &quot;&#039;Plus Jakarta Sans&#039;, sans-serif&quot;;
        Chart.defaults.color = &#039;#94a3b8&#039;;

        // Initialize Chart.js
        let inflationChart = new Chart(ctx, {
            type: currentChartType,
            data: {
                labels: [...allLabels],
                datasets: [{
                    label: &#039;Inflation (%)&#039;,
                    data: [...allDataValues],
                    backgroundColor: currentThemeColor,
                    borderColor: currentThemeColor,
                    borderWidth: currentChartType === &#039;line&#039; ? 3 : 0,
                    fill: currentChartType === &#039;line&#039; ? { target: &#039;origin&#039;, above: &#039;rgba(234, 88, 12, 0.05)&#039; } : false,
                    borderRadius: 5,
                    borderSkipped: false,
                    barPercentage: 0.7,
                    categoryPercentage: 0.85,
                    tension: 0.35, 
                    pointBackgroundColor: &#039;#ffffff&#039;,
                    pointBorderColor: currentThemeColor,
                    pointBorderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: &#039;rgba(15, 23, 42, 0.95)&#039;,
                        titleFont: { size: 10, weight: &#039;700&#039; },
                        bodyFont: { size: 11, weight: &#039;700&#039; },
                        padding: 8,
                        cornerRadius: 8,
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return `Rate: ${context.parsed.y}%`;
                            }
                        }
                    },
                    datalabels: {
                        display: function() {
                            return currentYearFilter !== &#039;all&#039;;
                        },
                        anchor: &#039;end&#039;,
                        align: &#039;top&#039;,
                        offset: 2,
                        formatter: function(value) {
                            return value.toFixed(1) + &#039;%&#039;;
                        },
                        font: {
                            weight: &#039;700&#039;,
                            size: 9
                        },
                        color: function() {
                            return currentThemeColor;
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            font: { size: 8, weight: &#039;600&#039; },
                            maxRotation: 0,
                            autoSkip: true,
                            maxTicksLimit: 12
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: &#039;#f1f5f9&#039;,
                            drawBorder: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            padding: 6,
                            font: { size: 8.5, weight: &#039;500&#039; },
                            callback: function(value) {
                                return value + &#039;%&#039;;
                            }
                        },
                        border: {
                            display: false
                        }
                    }
                },
                animation: {
                    duration: 1200,
                    easing: &#039;easeOutQuart&#039;
                }
            }
        });

        // Function to update summary metrics box
        function updateStats(filteredLabels, filteredData) {
            if (!filteredData || filteredData.length === 0) return;

            let maxVal = filteredData[0];
            let maxIndex = 0;
            let minVal = filteredData[0];
            let minIndex = 0;

            for (let i = 1; i &lt; filteredData.length; i++) {
                if (filteredData[i] &gt; maxVal) {
                    maxVal = filteredData[i];
                    maxIndex = i;
                }
                if (filteredData[i] &lt; minVal) {
                    minVal = filteredData[i];
                    minIndex = i;
                }
            }

            const latestVal = filteredData[filteredData.length - 1];
            const latestLabel = filteredLabels[filteredLabels.length - 1];

            document.getElementById(&#039;stat-peak-val&#039;).innerText = maxVal.toFixed(1) + &#039;%&#039;;
            document.getElementById(&#039;stat-peak-date&#039;).innerText = filteredLabels[maxIndex];

            document.getElementById(&#039;stat-low-val&#039;).innerText = minVal.toFixed(1) + &#039;%&#039;;
            document.getElementById(&#039;stat-low-date&#039;).innerText = filteredLabels[minIndex];

            document.getElementById(&#039;stat-latest-val&#039;).innerText = latestVal.toFixed(1) + &#039;%&#039;;
            document.getElementById(&#039;stat-latest-date&#039;).innerText = latestLabel;
        }

        // Initialize initial metrics calculate on page load
        updateStats(allLabels, allDataValues);

        // Function to filter data by year tab
        function filterByYear(year) {
            currentYearFilter = year;
            
            [&#039;all&#039;, &#039;2024&#039;, &#039;2025&#039;, &#039;2026&#039;].forEach(y =&gt; {
                const btn = document.getElementById(`filter-${y}`);
                if (y === year) {
                    btn.classList.add(&#039;active&#039;);
                } else {
                    btn.classList.remove(&#039;active&#039;);
                }
            });

            let newLabels = [];
            let newData = [];

            if (year === &#039;all&#039;) {
                newLabels = [...allLabels];
                newData = [...allDataValues];
            } else {
                const yearSuffix = year.substring(2); // Get &quot;24&quot;, &quot;25&quot;, &quot;26&quot;
                for (let i = 0; i &lt; allLabels.length; i++) {
                    if (allLabels[i].endsWith(yearSuffix)) {
                        newLabels.push(allLabels[i]);
                        newData.push(allDataValues[i]);
                    }
                }
            }

            inflationChart.data.labels = newLabels;
            inflationChart.data.datasets[0].data = newData;
            
            updateStats(newLabels, newData);
            inflationChart.update();
        }

        // Function to change color themes
        function changeTheme(themeName, colorHex) {
            currentThemeColor = colorHex;
            currentThemeName = themeName;

            [&#039;orange&#039;, &#039;indigo&#039;, &#039;emerald&#039;, &#039;rose&#039;].forEach(t =&gt; {
                const btn = document.getElementById(`btn-theme-${t}`);
                if (t === themeName) {
                    btn.classList.add(&#039;active&#039;);
                } else {
                    btn.classList.remove(&#039;active&#039;);
                }
            });

            inflationChart.data.datasets[0].backgroundColor = currentThemeColor;
            inflationChart.data.datasets[0].borderColor = currentThemeColor;
            inflationChart.data.datasets[0].pointBorderColor = currentThemeColor;

            if (currentChartType === &#039;line&#039;) {
                inflationChart.data.datasets[0].fill = {
                    target: &#039;origin&#039;,
                    above: `${currentThemeColor}0D`
                };
            }

            inflationChart.update();
        }

        // Function to switch Chart type (Bar vs Line)
        function setChartType(type) {
            currentChartType = type;

            const barBtn = document.getElementById(&#039;btn-type-bar&#039;);
            const lineBtn = document.getElementById(&#039;btn-type-line&#039;);

            if (type === &#039;bar&#039;) {
                barBtn.classList.add(&#039;active&#039;);
                lineBtn.classList.remove(&#039;active&#039;);
            } else {
                lineBtn.classList.add(&#039;active&#039;);
                barBtn.classList.remove(&#039;active&#039;);
            }

            inflationChart.destroy();
            
            const datasetConfig = {
                label: &#039;Inflation (%)&#039;,
                data: inflationChart.data.datasets[0].data,
                backgroundColor: currentThemeColor,
                borderColor: currentThemeColor,
                borderWidth: type === &#039;line&#039; ? 3 : 0,
                fill: type === &#039;line&#039; ? { target: &#039;origin&#039;, above: `${currentThemeColor}0D` } : false,
                borderRadius: type === &#039;bar&#039; ? 5 : 0,
                borderSkipped: false,
                barPercentage: 0.7,
                categoryPercentage: 0.85,
                tension: 0.35,
                pointBackgroundColor: &#039;#ffffff&#039;,
                pointBorderColor: currentThemeColor,
                pointBorderWidth: 2,
                pointRadius: type === &#039;line&#039; ? 3 : 0,
                pointHoverRadius: type === &#039;line&#039; ? 5 : 0
            };

            inflationChart = new Chart(ctx, {
                type: type,
                data: {
                    labels: inflationChart.data.labels,
                    datasets: [datasetConfig]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: &#039;rgba(15, 23, 42, 0.95)&#039;,
                            titleFont: { size: 10, weight: &#039;700&#039; },
                            bodyFont: { size: 11, weight: &#039;700&#039; },
                            padding: 8,
                            cornerRadius: 8,
                            displayColors: false,
                            callbacks: {
                                label: function(context) {
                                    return `Rate: ${context.parsed.y}%`;
                                }
                            }
                        },
                        datalabels: {
                            display: function() {
                                return currentYearFilter !== &#039;all&#039;;
                            },
                            anchor: &#039;end&#039;,
                            align: &#039;top&#039;,
                            offset: 2,
                            formatter: function(value) {
                                return value.toFixed(1) + &#039;%&#039;;
                            },
                            font: { weight: &#039;700&#039;, size: 9 },
                            color: function() { return currentThemeColor; }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 8, weight: &#039;600&#039; }, maxRotation: 0, autoSkip: true, maxTicksLimit: 12 }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { color: &#039;#f1f5f9&#039;, borderDash: [5, 5] },
                            ticks: {
                                padding: 6,
                                font: { size: 8.5, weight: &#039;500&#039; },
                                callback: function(value) { return value + &#039;%&#039;; }
                            },
                            border: { display: false }
                        }
                    }
                }
            });
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
    &lt;script&gt;
        function reportHeight() {
            var h = document.documentElement.scrollHeight;
            window.parent.postMessage({ type: &#039;raw-html-resize&#039;, id: &#039;raw-html-6abe27f6c294c&#039;, height: h }, &#039;*&#039;);
        }
        window.addEventListener(&#039;load&#039;, reportHeight);
        if (window.ResizeObserver) {
            new ResizeObserver(reportHeight).observe(document.body);
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"></iframe>
<script>
if (!window._rawHtmlListenerAttached) {
    window._rawHtmlListenerAttached = true;
    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'raw-html-resize' && event.data.id) {
            var iframe = document.getElementById(event.data.id);
            if (iframe) {
                var height = Math.min(Math.max(event.data.height, 50), 30000);
                iframe.style.height = height + 'px';
            }
        }
    });
}
</script>
<p><strong>ستمبر 2026 کے دوران ہیڈ لائن مہنگائی سالانہ بنیاد پر 10.3 فیصد ریکارڈ کی گئی جو اگست کے 11.1 فیصد کے مقابلے میں کم ہے۔</strong></p>
<p>ادارہ شماریات  کے مطابق ستمبر 2025 میں صارف قیمتوں کا اشاریہ (سی پی آئی) 5.6 فیصد ریکارڈ کیا گیا تھا۔</p>
<p>ماہانہ بنیاد پر ستمبر 2026  کے دوران سی پی آئی میں 1.3 فیصد اضافہ ہوا جب کہ گزشتہ ماہ اس میں 1.2 فیصد اور ستمبر 2025 میں 2.1 فیصد اضافہ ریکارڈ کیا گیا تھا۔</p>
<p>شہری علاقوں میں صارف قیمتوں کے اشاریے (سی پی آئی) پر مبنی افراطِ زر ستمبر 2026 میں سالانہ 10.1 فیصد بڑھا جبکہ گزشتہ ماہ یہ اضافہ 10.4 فیصد اور ستمبر 2025 میں 5.7 فیصد ریکارڈ کیا گیا تھا۔</p>
<p>ماہانہ بنیاد پرستمبر 2026 میں سی پی آئی میں 1.3 فیصد اضافہ ہوا جبکہ گزشتہ ماہ اس میں 0.9 فیصد اور ستمبر 2025 میں 1.6 فیصد اضافہ ریکارڈ کیا گیا تھا۔</p>
<p>دیہی علاقوں میں صارف قیمتوں کے اشاریے (سی پی آئی) پر مبنی افراطِ زر ستمبر 2026 میں سالانہ بنیاد پر 10.5 فیصد بڑھا جبکہ گزشتہ ماہ یہ اضافہ 12.2 فیصد اور ستمبر 2025 میں 5.9 فیصد ریکارڈ کیا گیا تھا۔</p>
<p>ماہانہ بنیاد پر ستمبر 2026 میں سی پی آئی میں 1.2 فیصد اضافہ ہوا جبکہ گزشتہ ماہ اس میں 1.6 فیصد اور ستمبر 2025 میں 2.8 فیصد اضافہ ریکارڈ کیا گیا تھا۔</p>
<p>مالی سال 2027  کی پہلی سہ ماہی کے دوران سی پی آئی پر مبنی افراطِ زر کی شرح 10.2 فیصد رہی جبکہ گزشتہ سال کی اسی مدت میں یہ شرح 4.3 فیصد تھی۔</p>
<p><strong>حکومت کی توقعات</strong></p>
<p>ایک روز قبل وزارتِ خزانہ  نے اپنی ماہانہ رپورٹ میں توقع ظاہر کی تھی کہ قلیل مدت میں افراطِ زر کی شرح بلند رہے گی جبکہ ہیڈ لائن صارف قیمتوں کے اشاریے پر مبنی افراطِ زر ستمبر 2026 میں 10 سے 11 فیصد رہنے کا تخمینہ لگایا گیا تھا۔ رپورٹ کے مطابق اس کے بعد افراطِ زر کی سمت کا انحصار بڑی حد تک عالمی سطح پر تیل کی قیمتوں پر ہوگا۔</p>
<p>رپورٹ میں بتایا گیا کہ حکومت کے جاری اخراجات اور سود کی ادائیگیوں میں اضافے کے باعث جولائی 2026 میں مجموعی مالیاتی خسارہ 596.6 ارب روپے تک پہنچ گیا۔</p>
<p>رپورٹ کے مطابق عالمی سطح پر بلند تیل کی قیمتیں معاشی منظرنامے کے لیے بدستور سب سے بڑا خطرہ ہیں جو قوت خرید، پیداواری لاگت اور درآمدی بل کو متاثر کررہی ہیں۔</p>
<p>رپورٹ میں یہ بات نوٹ کی گئی کہ وزیرِ اعظم کا فیول ریلیف اسکیم پیٹرولیم لیوی میں کٹوتی کیے بغیر ایک ڈیجیٹل ترسیلی نظام کے ذریعے نچلے طبقے کے گھرانوں کو ریلیف فراہم کررہی ہے۔ رپورٹ کے مطابق اس سے مالیاتی نظم و ضبط کو برقرار رکھتے ہوئے قوتِ خرید کا تحفظ کیا جاتا ہے۔</p>
<p><strong>ماہرین کی توقعات</strong></p>
<p>قبل ازیں متعدد بروکریج ہاؤسز نے توقع ظاہر کی تھی کہ ستمبر کے دوران صارف قیمتوں میں افراطِ زر کم ہوکر تقریباً 10 فیصد رہ جائے گا، تاہم ایندھن اور بجلی کی بڑھتی لاگت سے قیمتوں پر دباؤ بلند رہنے کا امکان ہے جس سے مرکزی بینک کی زری پالیسی کے منظرنامے میں پیچیدگی پیدا ہوسکتی ہے۔</p>
<p>ٹاپ لائن سیکیورٹیز، اسماعیل اقبال سیکیورٹیز، عباسی اینڈ کمپنی اور گروتھ سیکیورٹیز کے اندازوں کے مطابق، ستمبر میں افراطِ زر کی شرح سالانہ بنیاد پر 9.9 فیصد سے 10.5 فیصد کے درمیان رہنے کی توقع تھی۔</p>
]]></content:encoded>
      <category>Business &amp; Finance</category>
      <guid>https://urdu.brecorder.com/news/40291973</guid>
      <pubDate>Thu, 01 Oct 2026 14:29:26 +0500</pubDate>
      <author>none@none.com (بی آر ویب ڈیسک)</author>
      <media:content url="https://i.brecorder.com/large/2026/10/01142918a037e76.webp" type="image/webp" medium="image" height="768" width="1024">
        <media:thumbnail url="https://i.brecorder.com/thumbnail/2026/10/01142918a037e76.webp"/>
        <media:title/>
      </media:content>
    </item>
  </channel>
</rss>
