how to get the height in pixel of the grid in a bar chart created with echarts

I have an angular application with an echart (v5.5.1) of type bar showing a distribution, i use the large: true option because i can have up to 32k categories in my series.

i want to create a graphic shape of type 'rect' that spans from value x0 to value x1 and that covers all the grid area from 0 to maxY.

My configuration is:


const x0 = this.chart.convertToPixel({ gridIndex: 0 }, from);

const x1 = this.chart.convertToPixel({ gridIndex: 0 }, to);

{
xAxis: {
type: 'category',
data: labels,
},
yAxis: {
name: 'y axis',
},
series: [mySeries],
graphic: {
type: 'rect',
z: -10,
shape: {
x: x0,
width: x1-x0,
y: 0,
height: <-- this is the value i am missing
},
style: {
fill: 'red',
}
}
};


i tried to set the height to:

height: (params)=>{
return params.coordSys.height;
}


but that didn't work.. it wasn't even called.

Any advice?

Continue reading...