Graph won't start at zero - node.js

Question

I'm working on a Dashboard, and I'm trying to display daily sales on a graph using mongodb. The issue that I'm having is that my graph does not start at 0, instead it starts at a number closer to the lowest number of daily sales that I entered. Also, the graph only displays the two dates that had sales, and I was wondering if there was a way to include all dates in between and following those dates? I would really appreciate any help or advice on how to solve this problem. Thank you!
OrderRouter.js
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import Order from '../models/orderModel.js';
import User from '../models/userModel.js';
import Product from '../models/productModel.js';
import {isAdmin, isAuth, isSellerOrAdmin, mailer, payOrderEmailTemplate} from '../utils.js';
orderRouter.get(
'/summary',
isAuth,
isAdmin,
expressAsyncHandler(async (req, res) => {
const dailySales = await Order.aggregate([
{
$group: {
_id: { $dateToString: { format: '%m-%d-%Y', date: '$createdAt' } },
orders: { $sum: 1 },
sales: { $sum: '$totalPrice' },
},
},
{ $sort: { _id: 1 } },
]);
res.send({ dailySales });
})
);
export default orderRouter;
DashboardScreen.js
import { useDispatch, useSelector } from 'react-redux';
import Chart from 'react-google-charts';
import { summaryOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
export default function DashboardScreen() {
const orderSummary = useSelector((state) => state.orderSummary);
const { loading, summary, error } = orderSummary;
const dispatch = useDispatch();
useEffect(() => {
dispatch(summaryOrder());
}, [dispatch]);
return (
<div>
<div className="line">
</div>
<div className="background">
<div>
<h1>Dashboard</h1>
</div>
{loading ? (
<LoadingBox />
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<>
<div className="graphs">
<div>
<h2 className="graphname">Daily Sales</h2>
{summary.dailySales.length === 0 ? (
<MessageBox>No Sale</MessageBox>
) : (
<Chart
width="100%"
height="400px"
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [x._id, x.sales]),
]}
></Chart>
)}
</div>
</div>
<div>
</div>
</>
)}
</div>
</div>
);
}

Answer 1

In answer to your first question: in the Documentation for react-google-charts, there is a configuration option called: vAxis.minValue, described as:
Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data.
I'm betting this will help you out. In the docs, there's also an example of implementation:
vAxis: {minValue: 0}