# Wrong xaxis for horizontal barchart

**URL:** <https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [November 1, 2019, 9:45am UTC](https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136 "2019-11-01T09:45:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olivier\_Bilger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/olivier_bilger/32/56973_2.png) [@Olivier\_Bilger](https://discuss.elastic.co/u/Olivier_Bilger)\
**Post date:** [November 1, 2019, 9:45am UTC](https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136/1 "2019-11-01T09:45:57Z")

</div>

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

 ![01](https://us1.discourse-cdn.com/elastic/original/3X/7/2/72ef93d3381ee2fe63e9cbc56a53b545cd1deedf.png)

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 ?

---

<div class="post-metadata">

**Author:** ![tims](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tims/32/46750_2.png) [@tims](https://discuss.elastic.co/u/tims)\
**Post date:** [November 14, 2019, 10:32pm UTC](https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136/2 "2019-11-14T22:32:21Z")

</div>

Something like this should override it:

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

---

<div class="post-metadata">

**Author:** ![Olivier\_Bilger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/olivier_bilger/32/56973_2.png) [@Olivier\_Bilger](https://discuss.elastic.co/u/Olivier_Bilger)\
**Post date:** [November 15, 2019, 9:56am UTC](https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136/3 "2019-11-15T09:56:46Z")

</div>

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

 ![22](https://us1.discourse-cdn.com/elastic/original/3X/c/f/cf4a8be861654defcccfc10799b2990169f0c365.png)

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; }  
"

---

<div class="post-metadata">

**Author:** ![tims](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tims/32/46750_2.png) [@tims](https://discuss.elastic.co/u/tims)\
**Post date:** [November 15, 2019, 5:54pm UTC](https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136/4 "2019-11-15T17:54:41Z")

</div>

Can you add `AND cpu > 0` to the query?

---

<div class="post-metadata">

**Author:** ![Olivier\_Bilger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/olivier_bilger/32/56973_2.png) [@Olivier\_Bilger](https://discuss.elastic.co/u/Olivier_Bilger)\
**Post date:** [December 13, 2019, 5:54pm UTC](https://discuss.elastic.co/t/wrong-xaxis-for-horizontal-barchart/206136/5 "2019-12-13T17:54:46Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.