How to optimize chart data | ChartJS

My question is about chartJS.
I have Chart type line with 2 datasets the data is about members evrey 3 minutes in 24 hour.
The thing is that its a lot of data about 1500 rows of sql table.
The problem im getting with is that because there is alot of data the chart is looking awful.
My question is there is any way how can I optimize it so it will look better?

The chart is based on ChartJS
This is the code of the chart settings –

 Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: <?php echo json_encode($cnnlsTime) ?> ,
    datasets: [
        {
      label: "CNNls Members",
      lineTension: 0.1,
      backgroundColor: "rgba(255,165,0,0.2)",
      borderColor: "rgba(2,117,216,1)",
      pointRadius: 1,
      pointBackgroundColor: "rgba(2,117,216,1)",
      pointBorderColor: "rgba(255,255,255,0.8)",
      pointHoverRadius: 2,
      pointHoverBackgroundColor: "rgba(2,117,216,1)",
      pointHitRadius: 50,
      pointBorderWidth: 2,
      data: <?php echo json_encode($cnnlsMembers) ?> ,
    },
   
    {
      label: "CNNSF Members",
      lineTension: 0.1,
      backgroundColor: "rgba(255,165,0,0.2)",
      borderColor: "rgba(2,117,216,1)",
      pointRadius: 1,
      backgroundColor: "rgba(2,117,216,1)",
      pointBorderColor: "rgba(255,255,255,0.8)",
      pointHoverRadius: 2,
      pointHoverBackgroundColor: "rgba(2,117,216,1)",
      pointHitRadius: 50,
      pointBorderWidth: 2,
      data: <?php echo json_encode($cnnsfMembers) ?> ,
    },
],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'time'
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 400
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 30,
          maxTicksLimit: 5
        },
        gridLines: {
          color: "rgba(0, 0, 0, .125)",
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

Any suggestions?