TimeSeries add yAxis style property with beginAtZero (#81)

propeldata · Apr 26, 2023 · 087a7d0 · 087a7d0
1 parent cbffffa
commit 087a7d0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/packages/react/time-series/README.md b/packages/react/time-series/README.md
@@ -115,6 +115,7 @@ The `styles` prop allows you to customize the appearance of the chart. It accept
 | bar       | `BarStyles`     | Styles for the bars in the chart (only used in `bar` variant)  |
 | line      | `LineStyles`    | Styles for the line in the chart (only used in `line` variant) |
 | point     | `PointStyles`   | Styles for the points in the chart                             |
+| yAxis     | `YAxisStyles`   | Options for the y Axis                                         |
 
 ### FontStyles
 
@@ -184,3 +185,9 @@ The `styles` prop allows you to customize the appearance of the chart. It accept
 | borderWidth          | `number`                                                                                      | `1`         | Border width of the point in `px`.      |
 | hoverBorderColor     | `string`                                                                                      | `"#000"`    | Border color of the point on hover.     |
 | hoverBackgroundColor | `string`                                                                                      | `"#000"`    | Background color of the point on hover. |
+
+## yAxis Styles
+
+| Name        | Type      | Default | Description                                     |
+| ----------- | --------- | ------- | ----------------------------------------------- |
+| beginAtZero | `boolean` | `false` | Whether the y axis should begin at zero or not. |
diff --git a/packages/react/time-series/src/TimeSeries.tsx b/packages/react/time-series/src/TimeSeries.tsx
@@ -186,6 +186,7 @@ export function TimeSeries(props: TimeSeriesProps) {
         },
         y: {
           display: !hideGridLines,
+          beginAtZero: styles?.yAxis?.beginAtZero || defaultStyles.yAxis.beginAtZero,
           grid: { drawOnChartArea: true }
         }
       }

diff --git a/packages/react/time-series/src/defaults.ts b/packages/react/time-series/src/defaults.ts
@@ -52,6 +52,9 @@ export const defaultStyles = {
     borderWidth: 1,
     hoverBorderColor: '#000',
     hoverBackgroundColor: '#000'
+  },
+  yAxis: {
+    beginAtZero: false
   }
 }
 

diff --git a/packages/react/time-series/src/types.ts b/packages/react/time-series/src/types.ts
@@ -76,4 +76,7 @@ export type Styles = {
     backgroundColor?: string
     hoverBackgroundColor?: string
   }
+  yAxis?: {
+    beginAtZero?: boolean
+  }
 }