# Kibana Custom Visualization By Vega

**URL:** https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353
**Category:** Kibana
**Tags:** vega
**Created:** [April 29, 2020, 10:42am UTC](https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353 "2020-04-29T10:42:05Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ZMMWMY](https://avatars.discourse-cdn.com/v4/letter/z/a587f6/32.png) [@ZMMWMY](https://discuss.elastic.co/u/ZMMWMY)
#### Post date: [April 29, 2020, 10:42am UTC](https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353/1 "2020-04-29T10:42:05Z")

</div>

I want create a data table by using Vega , But I don’t know much about its syntax . i copy a json from blog and edit it , i just want a data table looks like

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

```auto
{
    "$schema":"https://vega.github.io/schema/vega/v3.json",
    "width":400,
    "height":200,
    "data":[
        {
            "name":"vals",
            "values":{
                "aggregations":{
                    "day":{
                        "buckets":[
                            {
                                "key":"1528065000000",
                                "doc_count":306344,
                                "interface-error":{
                                    "doc_count":135
                                },
                                "gateway-error":{
                                    "doc_count":539
                                },
                                "error":{
                                    "doc_count":674
                                },
                                "costTimePercent":{
                                    "value":65.12306100331654
                                },
                                "total_percent":{
                                    "value":0.22001410179406156
                                },
                                "gateway_percent":{
                                    "value":0.17594599535163086
                                },
                                "interface_percent":{
                                    "value":0.044068106442430734
                                }
                            },
                            {
                                "key":"1528092000000",
                                "doc_count":537511,
                                "interface-error":{
                                    "doc_count":240
                                },
                                "gateway-error":{
                                    "doc_count":1097
                                },
                                "error":{
                                    "doc_count":1337
                                },
                                "costTimePercent":{
                                    "value":60.83055416540313
                                },
                                "total_percent":{
                                    "value":0.2487390955719976
                                },
                                "gateway_percent":{
                                    "value":0.20408884655383797
                                },
                                "interface_percent":{
                                    "value":0.04465024901815963
                                }
                            },
                            {
                                "key":"1528099200000",
                                "doc_count":196931,
                                "interface-error":{
                                    "doc_count":51
                                },
                                "gateway-error":{
                                    "doc_count":359
                                },
                                "error":{
                                    "doc_count":410
                                },
                                "costTimePercent":{
                                    "value":37.754492690333166
                                },
                                "total_percent":{
                                    "value":0.2081947484144193
                                },
                                "gateway_percent":{
                                    "value":0.18229735287994273
                                },
                                "interface_percent":{
                                    "value":0.025897395534476543
                                }
                            }
                        ]
                    }
                }
            },
            "format":{
                "property":"aggregations.day.buckets"
            }
        }
    ],
    "encoding":{
        "x":{
            "field":"Cylinders",
            "type":"ordinal"
        },
        "y":{
            "field":"Origin",
            "type":"ordinal"
        }
    },
    "layer":[
        {
            "mark":"rect",
            "encoding":{
                "color":{
                    "field":"doc_count",
                    "type":"quantitative",
                    "title":"Count of Records",
                    "legend":{
                        "direction":"horizontal",
                        "gradientLength":120
                    }
                }
            }
        },
        {
            "mark":"text",
            "encoding":{
                "text":{
                    "field":"doc_count",
                    "type":"quantitative"
                },
                "color":{
                    "condition":{
                        "test":"datum['doc_count'] < 40",
                        "value":"black"
                    },
                    "value":"white"
                }
            }
        }
    ],
    "config":{
        "axis":{
            "grid":true,
            "tickBand":"extent"
        }
    }
}

```

Thank you in advance

---

<div class="post-metadata">

### Author: ![ZMMWMY](https://avatars.discourse-cdn.com/v4/letter/z/a587f6/32.png) [@ZMMWMY](https://discuss.elastic.co/u/ZMMWMY)
#### Post date: [April 30, 2020, 3:37am UTC](https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353/2 "2020-04-30T03:37:40Z")

</div>

Is it any other way?

---

<div class="post-metadata">

### Author: ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)
#### Post date: [May 4, 2020, 9:07pm UTC](https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353/3 "2020-05-04T21:07:24Z")

</div>

This thread says pretty much what I wanted to say: [Vega Lite Table Output Option](https://discuss.elastic.co/t/vega-lite-table-output-option/124428)

---

<div class="post-metadata">

### Author: ![ZMMWMY](https://avatars.discourse-cdn.com/v4/letter/z/a587f6/32.png) [@ZMMWMY](https://discuss.elastic.co/u/ZMMWMY)
#### Post date: [May 5, 2020, 3:21am UTC](https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353/4 "2020-05-05T03:21:18Z")

</div>

thank you for your reply,I have read this article, But I think my question is how to customize the X axis

---

<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: [June 2, 2020, 3:21am UTC](https://discuss.elastic.co/t/kibana-custom-visualization-by-vega/230353/5 "2020-06-02T03:21:25Z")

</div>

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