[Feature] dataZoom's miniature misrepresents data in a managed plot (the plot drawn over the slider doesn't match the main plot's data) #16724
Description
What problem does this feature solve?
When I create simple line plot/chart using Apache Echarts I also can add built-in data scaling mechanism: dataZoom. It reaches its main goal, but there is a question to scaled data representation, made by dataZoom. By default, dataZoom doesn't take into account the chart scale limits ticks or/and the minimum and maximum allowable values (range of a function, represented by the plot). Instead, the thumbnail of the chart is drawn on the specific value range passed to the plot in series section. In addition, everytime a small indent is added from the minimum and maximum values to the borders of the graphic element.
As a result, the representation of the visualised data looks inconsistent with reality: null is not null, max is not max (because they don't match the lower and higher bounds of the coordinate area of the thumbnail plot, respectively), the amplitude of the chart fluctuations does not correspond to the scale of real data fluctuations:
I drawn a small example, it may be pasted to Echarts online editor.
let x = [];
let y = [];
let scaled = [];
/*y = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 300, 300,
10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 0, 0, 0, 0, 0, 0
];*/
for (let i = 1; i < 300; i++) {
x.push(i);
element = Math.random() * 40 + 50;
y.push(element);
scaled.push(element * 6 - 250);
}
option = {
xAxis: {
data: x
},
yAxis: {
min: 0,
max: 300
},
dataZoom: [
{
start: 50,
end: 58.5
}
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
data: y
},
{
name: 'Simulated Scaling',
type: 'line',
symbol: 'none',
lineStyle: {
opacity: 0.3
},
data: scaled
}
]
};
As you can see, the magnitude of the fluctuations of the graph, drawn by dataZoom doesn't correspond rather to the main data, but to some kind of artificial transformation of them (light green graph). Then try to comment 11st line and uncomment lines from 4 to 7. At the start of the plot you'll see main graph touching y zero line, but not on the thumbnail.
I didn't find any params for dataZoom that make them to look like expected. My question on StackOverFlow was left unanswered, so I made this feature request.
What does the proposed API look like?
Is there a way (documented or undocumented) to remove the indents and force the plot to use the minimum and maximum values allowed for the yAxis ticks? Some options like dataZoom.slider.removeGaps: true | false and dataZoom.slider.range (values like "asInData" (current behavior), "asInYaxis" (my case), etc)?