Ensured bar charts start at 0

src/visits/GraphCard.js

@@ -33,9 +33,18 @@ export function GraphCard({ title, isBarChart, stats }) {
   });
   const renderGraph = () => {
     const Component = isBarChart ? HorizontalBar : Doughnut;
-    const legend = isBarChart ? { display: false } : { position: 'right' };
+    const options = {
+      legend: isBarChart ? { display: false } : { position: 'right' },
+      scales: isBarChart ? {
+        xAxes: [
+          {
+            ticks: { beginAtZero: true },
+          },
+        ],
+      } : null,
+    };
 
-    return <Component data={generateGraphData(stats)} options={{ legend }} />;
+    return <Component data={generateGraphData(stats)} options={options} />;
   };
 
   return (

test/visits/GraphCard.test.js

@@ -26,6 +26,7 @@ describe('<GraphCard />', () => {
     expect(horizontal).toHaveLength(0);
 
     const { labels, datasets: [{ title, data, backgroundColor, borderColor }] } = doughnut.prop('data');
+    const { legend, scales } = doughnut.prop('options');
 
     expect(title).toEqual('The chart');
     expect(labels).toEqual(keys(stats));
@@ -40,6 +41,8 @@ describe('<GraphCard />', () => {
       '#4D5360',
     ]);
     expect(borderColor).toEqual('white');
+    expect(legend).toEqual({ position: 'right' });
+    expect(scales).toBeNull();
   });
 
   it('renders HorizontalBar when is not a bar chart', () => {
@@ -51,8 +54,17 @@ describe('<GraphCard />', () => {
     expect(horizontal).toHaveLength(1);
 
     const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
+    const { legend, scales } = horizontal.prop('options');
 
     expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
     expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
+    expect(legend).toEqual({ display: false });
+    expect(scales).toEqual({
+      xAxes: [
+        {
+          ticks: { beginAtZero: true },
+        },
+      ],
+    });
   });
 });