How do I only show a dot for every nth data point using React ChartJs?

Question

I've searched multiple posts, the only answers I've found were for only showing every nth label. I am trying to only show every nth data point's dot, while still keeping the trend of the line with that data point. I hope that makes sense.

So for example I have data like so:

const data = [
    [1556946137009, 0.3056428749328792],
    [1556949699291, 0.3052645823199878],
    [1556953236188, 0.3064219950406184],
    [1556956813423, 0.30619822846339917],
    [1556960536911, 0.3051878341993484],
    [1556964019167, 0.30350702631519183]
]

And I want to represent all of the data on a line graph, but I only want there to be a dot for every nth data point. So, like a dot for the first and last of the data set. And for everything in between:

If i%2 === 0 then have a dot for that spot on the line graph.

Here is what I have now. I'm not sure how to achieve what I want. I looked at the docs and theres the spanGaps property, but I don't think that will work since it's only if there is no data for that point.

import React from 'react';
import { Line } from 'react-chartjs-2';
import './Graph.scss';

export default class Graph extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            marketData: [props.marketData],
            chartData:{
                labels: props.timeData,
                datasets: [
                    {
                        label: 'Price in USD',
                        fill: false,
                        borderColor: "#bae755",
                        borderDash: [5, 5],
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        pointBackgroundColor: "#55bae7",
                        pointBorderColor: "#55bae7",
                        pointHoverBackgroundColor: "#55bae7",
                        pointHoverBorderColor: "#55bae7",
                        data: props.priceData,
                        backgroundColor:[
                            '#55bae7'
                        ]
                    }
                ]
            }
        }
    }

    render(){

        return (
            <div className='graph-inner-container'>
                <h2 className='graphName'>{this.props.graphname}</h2>
                <Line
                    data={this.state.chartData}
                    width={900}
                    height={450}
                    options={
                        {
                            maintainAspectRatio: true,
                            responsive: true,
                            aspectRatio: 2,
                            scales:{
                                xAxes:[{
                                    display: false
                                }]
                            },
                            layout: {
                                padding: {
                                    right: 10
                                }
                            }
                        }
                    }
                />
            </div>
        )
    }

}