Open arajcok opened 3 years ago
Hi @arajcok, is because of clipPath: false
. clipPath option will make chart shape to not being clipped.
Remove clipPath
option.
Having the clipPath
was to show how the leftmost point (the first value for the zoom range) is outside the graph window (to the left of the y-axis). Removing the clipPath
does not seem to fix the issue. For example, the timeseries chart, the first data point (at time 2013-01-03) is not visible on the chart.
to mitigate this, set axis.y.min
value.
axis: {
y: {
min: 0
}
}
Setting axis.y.min = 0
does not seem to mitigate the issue, as the data point still lies outside the graph window occasionally. Also, I am not sure what effect setting the axis.y.min = 0
would have for graphs that have negative values.
I think is due to the fact that the zoom range isn't finite, and instead approximates to the range specified.
// for ESM environment, need to import modules as:
// import bb, {line, zoom} from "billboard.js"
var chart = bb.generate({
data: {
columns: [
["sample", 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 6500]
],
type: "area-spline", // for ESM specify as: line()
},
spline: {
interpolation: {
type: "monotone-x"
}
},
clipPath: false, // to see the point to the left of the y-axis
zoom: {
enabled: true, // for ESM specify as: zoom()
},
bindto: "#zoom"
});
setTimeout(() => {
chart.zoom([8, 11]);
}, 1000);
setTimeout(() => {
// prints [8.000794459336127, 11.00068966529944]
console.log(chart.zoom());
}, 2000);
setTimeout(() => {
chart.zoom([9, 11]);
}, 3000);
setTimeout(() => {
// prints [9.009057993290602, 11.00068966529944]
console.log(chart.zoom());
}, 4000);
First zoom:
Second zoom:
Description
The zoom API does not always zoom to the specified range. It is close, but sometimes the first data point lies outside the graph window (to the left of the y-axis).
Steps to check or reproduce
The above code produces the following (after the timeout). Note how the first data point is outside the graph window:
This can have unintended side-effects with zooming when you try to add rescaling, as can be seen with the below timeseries chart: