# Create X Axis percentage chart of total

**URL:** <https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373>\
**Category:** Kibana\
**Created:** [November 18, 2019, 6:45pm UTC](https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373 "2019-11-18T18:45:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![markus\_buchner](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markus_buchner/32/57882_2.png) [@markus\_buchner](https://discuss.elastic.co/u/markus_buchner)\
**Post date:** [November 18, 2019, 6:45pm UTC](https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373/1 "2019-11-18T18:45:03Z")

</div>

I am struggling getting used to kibana charting - or its not possible at all. I have a really simple index structure like:

RequestId: 1234  
Duration(in seconds): 1,3

What I want (have to) visualize is a percentage bucket on X Axis  
-\> 1% of total requests (within selected timeframe) are within x seconds  
-\> 2 % of total requests (within selected timeframe) are within x seconds  
-\> 2 % of total requests (within selected timeframe) are within x seconds  
-\> ...  
-\> 98 % of total requests (within selected timeframe) are within x seconds  
-\> 99 % of total requests (within selected timeframe) are within x seconds

Here is an example chart in Excel:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/c/b/cb5c0df4d0a4d0abf04bc1788ab1e773a8dfe898.png)

Could you give me a hint how I can achieve this? I am also okay if this is only possible on Y Axis ...

Please Help - Thanks Max

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [November 19, 2019, 9:20am UTC](https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373/2 "2019-11-19T09:20:12Z")

</div>

Hi @markus_buchner,

This is indeed not easy to achieve with the current tooling. Elasticsearch is able to provide the data using the [percentiles aggregation](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-metrics-percentile-aggregation.html).

But in Kibana you can't use this as an x axis aggregation. You can get close by defining the percentiles you want to see (0, 2, 4, 6, 8, ...) as a y axis value and using an unstacked chart like in the screenshots below:

 ![13](https://us1.discourse-cdn.com/elastic/original/3X/2/b/2b3ee91ed9342d61d432ba3ee7cd53d97b85d5a6.png) ![19](https://us1.discourse-cdn.com/elastic/original/3X/7/7/7784e404745eb40f292048790a329d7c082b1009.png) ![24](https://us1.discourse-cdn.com/elastic/original/3X/0/d/0d7b1bd28f329b9b7cdddc6eb62299801e1823eb.png)

You can add a threshold line as shown in the screenshots, but just a single one with a static value (e.g. average won't work at the moment).

The downside of this is that the percentage labels are not shown on the x axis, only via color coding and on hovering a bar.

If you want to get closer to your excel screenshot, you can look into [vega charting](https://www.elastic.co/guide/en/kibana/current/vega-graph.html). It's much more flexible but there is a steep learning curve.

---

<div class="post-metadata">

**Author:** ![markus\_buchner](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markus_buchner/32/57882_2.png) [@markus\_buchner](https://discuss.elastic.co/u/markus_buchner)\
**Post date:** [November 19, 2019, 12:32pm UTC](https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373/3 "2019-11-19T12:32:24Z")

</div>

Thanks very much for your input - it helped me a lot and got me one step closer!

Here is my chart with all the details - probably it is also interesting for someone else ...

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/4/4/449c4fd867dd641ffbbd76bc3efdd47df3018225.png)

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/a/9a07994c5788c21a921aa52bf0bce26d07169eb3.png)

If I have time I will play around with vega and post my findings

Thanks Max

---

<div class="post-metadata">

**Author:** ![markus\_buchner](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markus_buchner/32/57882_2.png) [@markus\_buchner](https://discuss.elastic.co/u/markus_buchner)\
**Post date:** [November 22, 2019, 2:51pm UTC](https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373/4 "2019-11-22T14:51:24Z")

</div>

Got it working now with vega chart - here my code and the chart:

```
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  title: SLA percentile evaluation

  // Define the data source
  data: {
    url: {
      %context%: true
      %timefield%: @timestamp
      index: logstash-xcb-db-sec-sla-performance
      body: {
        "aggs":{
        	"percent-percentiles":{
        		"percentiles":{
        			"field":"total_duration",
        			"percents":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],
        			"keyed":false
        		}
        	}
        }
        // Speed up the response by only including aggregation results
        size: 0
      }
    }
    format: {property: "aggregations.percent-percentiles.values"},
  },
transform: [
  {
    "calculate": "0.9",
    "as": "sla1"
  },
  {
    "calculate": "1.4",
    "as": "sla2"
  }
],

"layer": [
{
  mark: bar
  encoding: {
    x: {
      field: key
      type: quantitative
      axis: {title: "Percentiles", tickMinStep: 1}
    },
    y: {
      field: value
      type: quantitative
      axis: {title: "Seconds"}
    },
    "tooltip": [
              {
                "field": "key",
                "type": "quantitative"
              },
              {
                "field": "value",
                "type": "quantitative"
              }
            ],
    "color": {"value": "#008B8B"}
  }
},
{
  "mark": "rule",
  "encoding": {
    "y": {
      "aggregate": "mean",
      "field": "value",
      "type": "quantitative"
    },
    "color": {"value": "gray"},
    "size": {"value": 3},
    "tooltip": [{
      "aggregate": "mean",
      "field": "value",
      "type": "quantitative"
    }]
  }
},
{
  "mark": "rule",
  "encoding": {
    "y": {
      "aggregate": "mean",
      "field": "sla1",
      "type": "quantitative"
    },
    "color": {"value": "orange"},
    "size": {"value": 3},
    "tooltip": [{
      "aggregate": "mean",
      "field": "sla1",
      "type": "quantitative"
    }]
  } 
},
{
  "mark": "rule",
  "encoding": {
    "y": {
      "aggregate": "mean",
      "field": "sla2",
      "type": "quantitative"
    },
    "color": {"value": "firebrick"},
    "size": {"value": 3},
    "tooltip": [{
      "aggregate": "mean",
      "field": "sla2",
      "type": "quantitative"
    }]
  }
}]
}

```

The chart:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/9/a/9a9f20461d4d783b0f28863fbdd2214316819f2a.png)

Greetings Max

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 20, 2019, 2:51pm UTC](https://discuss.elastic.co/t/create-x-axis-percentage-chart-of-total/208373/5 "2019-12-20T14:51:32Z")

</div>

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