diff --git a/pwa/app/components/bar-chart/chart.jsx b/pwa/app/components/bar-chart/chart.jsx
index e8721f1f425552a3f7070de89ed55339407c68c5..632ff4aca5f30e12f12e6ba285170769cd31b262 100644
--- a/pwa/app/components/bar-chart/chart.jsx
+++ b/pwa/app/components/bar-chart/chart.jsx
@@ -1,23 +1,26 @@
 import React, { useEffect, useRef } from 'react';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import * as d3 from 'd3';
 
-const BarChart = ({ data}) => {
+const BarChart = ({ data }) => {
     const d3Chart = useRef();
 
+    const isStartOfMonth = (date) => {
+        const day = new Date(date).getDate();
+        return day === 1;
+    };
+
     const drawChart = () => {
         const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
         const margin = { top: 50, right: 40, bottom: 70, left: 60 };
         const barWidth = 40;
         const maxWidth = window.innerWidth - margin.left - margin.right;
-        let chartWidth = data.length * barWidth;
-
+        let chartWidth = data.length * barWidth + 200;
+        console.log("    ",data.length)
         if (chartWidth > maxWidth) {
             chartWidth = maxWidth;
         }
 
-        const height = 500 - margin.top - margin.bottom;
+        const height = 600 - margin.top - margin.bottom;
 
         d3.select(d3Chart.current).select("svg").remove();
 
@@ -30,12 +33,15 @@ const BarChart = ({ data}) => {
 
         const x = d3.scaleBand()
             .range([0, chartWidth])
-            .padding(0.1);
+            .padding(0.1)
+            .domain(data.map(d => d.date));
         const y = d3.scaleLinear()
-            .range([height, 0]);
+            .range([height, 0])
+            .domain([0, d3.max(data, d => d.occurrences)]);
 
-        x.domain(data.map(d => d.date));
-        y.domain([0, d3.max(data, d => d.occurrences)]);
+        let displayedDates = data.length >= 600
+            ? data.filter(d => isStartOfMonth(d.date)).map(d => d.date)
+            : data.map(d => d.date);
 
         svg.selectAll(".bar")
             .data(data)
@@ -47,33 +53,30 @@ const BarChart = ({ data}) => {
             .attr("y", d => y(d.occurrences))
             .attr("height", d => height - y(d.occurrences));
 
-        // Axe X
         svg.append("g")
             .attr("transform", `translate(0, ${height})`)
-            .call(d3.axisBottom(x))
+            .call(d3.axisBottom(x).tickValues(displayedDates))
             .selectAll("text")
             .attr("transform", "rotate(-45)")
             .style("text-anchor", "end");
 
-        // Axe Y
         svg.append("g")
             .call(d3.axisLeft(y));
 
-        // Titre Axe X
+        // Titre Axe X à l'extrémité
         svg.append("text")
-            .attr("x", chartWidth / 2)
-            .attr("y", height + margin.bottom - 20)
-            .style("text-anchor", "middle")
+            .attr("x", chartWidth + 30)
+            .attr("y", height + margin.bottom / 2)
+            .style("text-anchor", "end")
             .text("Date");
 
-        // Titre Axe Y
+        // Titre Axe Y à l'extrémité supérieure
         svg.append("text")
-            .attr("transform", "rotate(-90)")
-            .attr("y", 0)
-            .attr("x", 0 - (height / 2))
-            .attr("dy", "-1em")
-            .style("text-anchor", "middle")
-            .text("Nombre de ventes");
+            .attr("transform", "rotate(360)")
+            .attr("y", 0 - margin.left + 40)
+            .attr("x", 0 - margin.top + 80)
+            .style("text-anchor", "end")
+            .text("Nbr ventes");
     };
 
     useEffect(() => {