Wrong xaxis for horizontal barchart

[Olivier_Bilger]

Hi,
When converting numeric values to percentage (mapColumn name= "percent" fn={getCell "cpu" | formatnumber "0.0%"}), the horizontal barchart goes wrong and the xaxis is not anymore correctly centered

The expression:
filters
| timefilter from="now-1m" to="now"
| essql
query="SELECT process.name, AVG(system.process.cpu.total.norm.pct) AS cpu FROM "metricbeat-*" WHERE agent.hostname='plexserver' AND event.dataset='system.process' GROUP BY process.name ORDER BY "cpu" DESC LIMIT 10"
| mapColumn name= "percent" fn={getCell "cpu" | formatnumber "0.0%"}
| sort by="percent"
| pointseries x="percent" y="process.name" color="process.name" text="percent"
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true} legend=false
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#FFFFFF" weight="normal" underline=false italic=false}
| render

I've tried to tweak the CSS:

.canvasRenderEl .valueLabel { left: 85% !important;
color: white }
.canvasRenderEl .flot-base {
width: 90% !important;
}

but haven't found the right property. What am I missing ?

[tims (Tim Schnell)]

Something like this should override it:

.canvasRenderEl .flot-text .flot-x-axis{
    position: relative !important;
    left: -40px !important;
}

[Olivier_Bilger]

Tim,
this works partially, I've tweaked a little bit the css to get get the xaxis correctly aligned but still have horizontal bars displayed on the graph even if value set to 0

filters
| timefilter from="now-1m" to="now"
| essql
query="SELECT process.name, AVG(system.process.cpu.total.norm.pct) AS cpu FROM "metricbeat-*" WHERE agent.hostname='plexserver' AND event.dataset='system.process' GROUP BY process.name ORDER BY "cpu" DESC LIMIT 10"
| mapColumn name="percent" fn={getCell "cpu" | formatnumber "0.0%"}
| pointseries x="percent" y="process.name" color="process.name" text="percent"
| sort by="x"
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true} legend=false
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#FFFFFF" weight="normal" underline=false italic=false} xaxis=true
| render
css=".canvasRenderEl
.valueLabel {left: 85% !important; color: white } .flot-base { width: 90% !important }
.flot-text .flot-x-axis{ position: relative !important; left: -70px !important; }
"

[tims (Tim Schnell)]

Can you add AND cpu > 0 to the query?