I'm trying to display live data given the past day, week, month, etc. Currently, the graph displays only a section of live data but I'd like for more to be shown. I'm using a barchart for now, and I'm aware of the live data having the same time logged, but I wanted to see if there is a way for more than 20 points to be shown on the chart. I added the code that I think I should edit. I've tried ticks and bounds but it's a little difficult for me to navigate exactly what I want on the chart.js site.

Edit: after some fixes to my database, I can see more data points displayed. However, when I choose "past month", I am supposed to have every recorded point from the past month. Would a scatter plot with a line through it be more reasonable to display?

Below is the application test image and code block:

Application test image

var myChart = document.getElementById("chart").getContext('2d');

gradient = myChart.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(29, 140, 248, 0.75)');
gradient.addColorStop(0.5, 'rgba(29, 140, 248, 0.5)');
gradient.addColorStop(1, 'rgba(29, 140, 248, 0)');

// Global Options
Chart.defaults.global.defaultFontFamily = 'inherit';
Chart.defaults.global.defaultFontSize = 18; //Effects x and y's number font size
Chart.defaults.global.defaultFontColor = '#777';

barchart = new Chart(myChart, {
    type:'bar',
    data: {
        labels: {{ data.x_vals | tojson }},                                         
        datasets:[{
            label:'Liquid Level',
            data: { { data.y_vals } },
            backgroundColor: gradient,
            borderWidth:1, //Effects plotted line on chart
            borderColor:'white',
            hoverBorderWidth:1,
            hoverBorderColor:'white',
            barThickness:15
        }]
    },
    options: {
        legend: {
            display:true,
            position:'right',
            labels: { fontColor:'#000' }
        },
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 0,
                    steps: 10,
                    stepValue: 10,
                    max: 100
                }
            }],
            xAxes: [{
                display: true,
                ticks: {
                    autoSkip: true,
                    padding: 4,
                    fontSize: 12
                }
            }]
        },
        layout:{
            padding:{
                left:0,
                right:0,
                bottom:0,
                top:0
            }
        }
    }
});