On plotly_relayout data is undefined

plotly.js
1

So this likely has more to do with my minimal understanding of Javascript than it does the plot.ly library but I am stuck on this one.
My code is as follows.

var myPlot = document.getElementById(‘chartDiv’)

myPlot.on(‘plotly_relayout’, function(data){
console.log(data)
console.log(data.xaxis.range[0])
});

Whenever I change the layout the function is called as expected and the result of console.log(data) is
{xaxis.range[0]: “2018-02-18 07:40:40.5”, xaxis.range[1]: “2018-02-18 07:50:40.5”}
xaxis.range[0] : "2018-02-18 07:40:40.5"
xaxis.range[1] : “2018-02-18 07:50:40.5”

The result of console.log(data.xaxis.range[0]) is
Uncaught (in promise) TypeError: Cannot read property ‘range’ of undefined

No matter what combination of data and axis I try, it always comes back undefined. Where am I going wrong?

2

I remember that I had similar problems months ago. The data is an object. And this object has key-value pairs. The keys are in your example “xaxis.range[0]” and “xaxis.range[1]”. So its not a real “xaxis”-object. I know that in other cases it is really a xaxis-object, but here its just a key name and is a bit misleading.
So try this: console.log(data["xaxis.range[0]"])

3

Well sure enough look at that. Thank you.

Now that I try your suggestion I see that this is the behavior when using the range selectors but when using the range slider it returns an array of length 2.

I don’t know if that is the desired behavior but at least it gives me a way to differentiate range slider action from range selector action.

Thank you, I would’ve never figured that out but now I have learned to look for the {:} to denote keys.

4

Yeah, this is a know inconsistency (see https://github.com/plotly/plotly.js/issues/1877)

Unfortunately, we can’t fix this in a backward-compatible way, so the fix will have to wait for plotly.js@2.0.0.

Sorry for the inconvenience.

5

No problem,
I am glad there is a forum full of knowledgable and helpful people for new learners like myself.