abalter abalter - 1 month ago 14
Javascript Question

Fixing x-range not working in plotly.js

I want to fix the x-axis range so that when you clear a trace in the legend, the x-axis range doesn't change — even if one trace has a different range.

I tried:

range: ["2016-05-01", "2016-05-05"]


Seems this should be all it takes, but the x-axis range still changes.

If I set autorange: false in the layout object, the plot fails. The x-axis values and ticks are all messed up. Why is this?

However, if I set the autorange property after the layout object definition with

layout_autorange_after = false;


Then all goes well.

HTML:

<div id="graph"></div>
<h3>Layout with <code>range</code> set but no <code>autorange</code></h3>
<div id="autorange"></div>
<h3>Layout with <code>range</code> set and <code>autorange: false</code></h3>
<div id="autorange-set-after"></div>
<h3>Layout with <code>range</code> set and <code>autorange</code>
set after with <code>layout_autorange_after = false;</code></h3>
<script src="script.js"></script>


JAVASCRIPT:

var data =
[
{
x: ["2016-05-01", "2016-05-02", "2016-05-03"],
y: [4, 5, 6],
mode: "lines+markers",
name: "Test",
yaxis: "y"
},
{
x: ["2016-05-02", "2016-05-04", "2016-05-05"],
y: [10, 2, 9],
mode: "lines+markers",
name: "Test 2",
yaxis: "y2"
}
];

var layout =
{
height: "300",
width: "500",
xaxis:
{
showgrid: false,
domain:[0.2,1],
range: ["2016-05-01", "2016-05-05"],
type:"date",
showline:true,
},
yaxis:
{
title: "Test",
position: 0,
range: [3,7],
color: "red",
showline: true,
showgrid: false,
},
yaxis2:
{
title: "Test 2",
position: 0.2,
overlaying:"y",
range: [1,11],
color: "blue",
showline: true,
showgrid: false,
}
};

var layout_autorange =
{
height: "300",
width: "500",
xaxis:
{
showgrid: false,
domain:[0.2,1],
range: ["2016-05-01", "2016-05-05"],
autorange: false,
type:"date",
showline:true,
},
yaxis:
{
title: "Test",
position: 0,
range: [3,7],
color: "red",
showline: true,
showgrid: false,
},
yaxis2:
{
title: "Test 2",
position: 0.2,
overlaying:"y",
range: [1,11],
color: "blue",
showline: true,
showgrid: false,
}
};

Plotly.plot('graph', data, layout);
Plotly.plot('autorange', data, layout_autorange);

layout_autorange_after = JSON.parse(JSON.stringify(layout));
layout_autorange_after.xaxis.autorange = false;
Plotly.plot('autorange-set-after', data, layout_autorange_after)


http://plnkr.co/edit/mtHNWF4zTBBivmRDnwY2?p=preview

Answer

You are using date as the axis type. From the documentation:

If the axis type is "date", then you must convert the date to unix time in milliseconds

If you convert your dates (and adjust the x-axis slightly) it should work as expected, i.e. autorange=false is not required and removing one trace does not alter the axis.

var data = 
[
    {
        x: [1462060800000, 1462147200000, 1462233600000],
        y: [4, 5, 6],
        mode: "lines+markers",
        name: "Test",
        yaxis: "y"
    },
    {
        x: [1462233600000, 1462320000000, 1462406400000],
        y: [10, 2, 9],
        mode: "lines+markers",
        name: "Test 2",
        yaxis: "y2"
    }
];

var layout = 
{
    height: "300",
    width: "500",
    xaxis:
    {
        showgrid: false,
        domain:[0.2,1],
        range: [1462060800000 - 6000000, 1462406400000],
        showline:true,
        type: "date"
    },
    yaxis:
    {
        title: "Test",
        position: 0,
        range: [3,7],
        color: "red",
        showline: true,
        showgrid: false,
    },
    yaxis2:
    {
        title: "Test 2",
        position: 0.2,
        overlaying:"y",
        range: [1,11],
        color: "blue",
        showline: true,
        showgrid: false,
    }
};


Plotly.plot('graph', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph"></div>

Comments