How to add dots to the points on my line chart in react-native-svg-charts?

Question

I am able to plot the line chart using react-native-svg-charts, now i want to plot dots on the points in the dataset like shown below, it is provided in the library itself, but i cannot figure out how to use it.

Answer 1

Add a dots component,

import { Circle } from 'react-native-svg'
import React,{useState} from'react';

interface DecoratorProps {
    x: (arg: number) => number,
    y: (arg: number) => number,
    data: number[]
}

export const Dots = (props: Partial<DecoratorProps>) => {
    const { x, y, data } = props 
    return (
        <>
            {data?.map((value, index) => (
                <Circle
                    key={index}
                    cx={x(index)}
                    cy={y(value)}
                    r={4}
                    stroke={'rgb(0, 0, 0)'}
                    fill={'white'}
                />
            ))}
        </>
    )
}

Then add it to the end of your Line Chart Component,

<LineChart
                          style={{ flex: 1 }}
                          gridMin={min}
                          gridMax={max+20}
                          data={data2}
                          contentInset={verticalContentInset}
                        svg={{ stroke: 'rgb(134, 65, 244)' }}>
                          <Grid />
                          <Dots />
                          <Tooltip/>
                      </LineChart>