React Js Plotly Remove Time Gaps In Graph

Question

I am trying to plot stock data, but there are gaps in the graph where data for these time periods don't exist. How do I remove these gaps? I found that there is an update_xaxes function but I'm not sure how to apply it to my case.

My code:

import React, { useState, Component, useEffect } from "react";
import Plot from 'react-plotly.js';

export const Chart = () => {

    return (
        <div>
            <Plot
                data={[
                    {
                        x: data['dates'],
                        y: data['open_price'],
                        type: 'scatter'
                    }
                ]}
                layout={{
                    autosize: false,
                    width: 1500,
                    height: 800,
                 xaxis: {
                        color: 'red',
                        rangebreaks: {
                            bounds: ["sat", "mon"],
                            values: ["2015-12-25", "2016-01-01"],
                            bounds: [17, 9], pattern: "hour"
                        }
                    }
                }}
            />
        </div>
    )
}

Unipolar

Is there any rangebreaks in javascript, and how to use them in Python? The official reference can be found here. – Cinchonize

I am not sure how to use it in react plotly js – Unipolar

Then why not use time-series data as a string? – Cinchonize

The dates plotly is using to graph my data is in string form – Unipolar

I followed the guide here: plotly.com/python/time-series – Unipolar

Answer 1

xaxis: {
                        color: 'red',
                        rangebreaks: [
                            { bounds: ["sat", "mon"] },
                            {
                                values: ["2019-12-25"]
                            },
                            { bounds: [17, 9], pattern: "hour" }
                        ]
                    }

I fixed it by making rangebreaks an array.

Unipolar

Answer 2

react-ploty allows configuring the underlying ploty configuration through props. The data props you're already using accepts the same Traces Object than regular ploty. Therefore you can use rangebreaks as suggested by @r-beginners to achieve the desired effect.

Saldivar

I am trying to use rangebreaks, see my code above. I am not sure why it isnt working. – Unipolar