diff --git a/README.md b/README.md index 2ce7287..d789373 100644 --- a/README.md +++ b/README.md @@ -163,18 +163,28 @@ Renders labels above or below the graph. Both props default to `undefined`, so n > Requires `animated` to be `true`. -These labels usually show the maximum and minimum values. You can derive those values and their positions from the graph points. +These labels usually show the maximum and minimum values. `AxisLabel` is not a component exported by this package: both props are callbacks that receive no arguments and render any React Native element you provide. The graph reserves a row above or below the canvas; positioning and styling inside that row belong to your label component. Example: -```jsx - } - BottomAxisLabel={() => } -/> +```tsx +import { Text } from 'react-native'; + +function PriceGraph() { + const values = priceHistory.map((point) => point.value); + const maxValue = Math.max(...values); + const minValue = Math.min(...values); + + return ( + {`Max: ${maxValue.toFixed(2)}`}} + BottomAxisLabel={() => {`Min: ${minValue.toFixed(2)}`}} + /> + ); +} ``` ### `range`