plotly / react-plotly.js

A plotly.js React component from Plotly 📈
MIT License
1.02k stars 136 forks source link

Rangebreak not working #277

Closed allenye66 closed 2 years ago

allenye66 commented 2 years ago

My range break doesn't seem to work. I am following the documentation here: https://plotly.com/javascript/reference/#layout.

<div>
            <Plot
                data={[
                    {
                        x: data['dates'],
                        y: data['open_price'],
                        type: 'scatter'
                    }
                ]}

                layout={{
                    autosize: false,
                    width: 1500,
                    height: 700,

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

                }

            />
        </div>
image
alexcjohnson commented 2 years ago

rangebreaks should be an array of objects, not just an object. Does this fix it?

allenye66 commented 2 years ago

@alexcjohnson I have updated my code, but it still does not seem to work.

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

                            }
                        ],
alexcjohnson commented 2 years ago

Try this:

                    xaxis: {
                        color: 'red',
                        rangebreaks: [{
                            bounds: ["sat", "mon"],
                            values: ["2015-12-25"],
                            bounds: [17, 9], pattern: "hour"
                        }]
                    }
allenye66 commented 2 years ago

@alexcjohnson Thank you! That seemed to limit the hours from 5 pm to 9 am. However, the bounds ["sat", "mon"] still don't seem to get rid of weekends, which according to https://plotly.com/python/time-series/ should. Do you know how to fix that?

alexcjohnson commented 2 years ago

Ah sorry, I missed that in your code - this is why rangebreaks is a list, because each pattern you want to exclude needs to be a separate object:

                    xaxis: {
                        color: 'red',
                        rangebreaks: [
                            {bounds: ["sat", "mon"]},
                            {values: ["2015-12-25"]},
                            {bounds: [17, 9], pattern: "hour"}
                        }]
                    }
allenye66 commented 2 years ago

@alexcjohnson Thank you so much! It is working now.