# How to create a scrollable vega visualization **URL:** \ **Category:** Kibana\ **Tags:** vega\ **Created:** [November 14, 2019, 12:29pm UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886 "2019-11-14T12:29:16Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![nashwin2804](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@nashwin2804](https://discuss.elastic.co/u/nashwin2804)\ **Post date:** [November 14, 2019, 12:29pm UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886/1 "2019-11-14T12:29:16Z")
Hi, I am using Kibana version 7.4 I want help in creating a scrollable vega visualization. Use Case: I would like to show only up to 20 tick values in the x-axis of a bar chart, if a user wants to view more than that he has to scroll the vertical bar and view the remaining. Sample Vega Visualization code ``` { "$schema": "https://vega.github.io/schema/vega/v4.json", "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87}, {"category": "I", "amount": 28}, {"category": "J", "amount": 55}, {"category": "K", "amount": 43}, {"category": "L", "amount": 91}, {"category": "M", "amount": 81}, {"category": "N", "amount": 53}, {"category": "O", "amount": 19}, {"category": "P", "amount": 87}, {"category": "Q", "amount": 28}, {"category": "R", "amount": 55}, {"category": "S", "amount": 43}, {"category": "T", "amount": 91}, {"category": "U", "amount": 81}, {"category": "V", "amount": 53}, {"category": "W", "amount": 19}, {"category": "X", "amount": 87}, {"category": "Y", "amount": 87}, {"category": "Z", "amount": 87}, {"category": "AA", "amount": 28}, {"category": "AB", "amount": 55}, {"category": "AC", "amount": 43}, {"category": "AD", "amount": 91}, {"category": "AE", "amount": 81}, {"category": "AF", "amount": 53}, {"category": "AG", "amount": 19}, {"category": "AH", "amount": 87}, {"category": "AI", "amount": 28}, {"category": "AJ", "amount": 55}, {"category": "AK", "amount": 43}, {"category": "AL", "amount": 91}, {"category": "AM", "amount": 81}, {"category": "AN", "amount": 53}, {"category": "AO", "amount": 19}, {"category": "AP", "amount": 87}, {"category": "AQ", "amount": 28}, {"category": "AR", "amount": 55}, {"category": "AS", "amount": 43}, {"category": "AT", "amount": 91}, {"category": "AU", "amount": 81}, {"category": "AV", "amount": 53}, {"category": "AW", "amount": 19}, {"category": "AX", "amount": 87}, {"category": "AY", "amount": 87}, {"category": "AZ", "amount": 87} ] } ], "signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true }, { "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ], "axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale" } ], "marks": [ { "type": "rect", "from": {"data":"table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"value": 30}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} }, "update": { "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, "text": {"signal": "tooltip.amount"}, "fillOpacity": [ {"test": "datum === tooltip", "value": 0}, {"value": 1} ] } } } ] } ``` Thanks in advance ---
**Author:** ![kilianten](https://avatars.discourse-cdn.com/v4/letter/k/bbce88/32.png) [@kilianten](https://discuss.elastic.co/u/kilianten)\ **Post date:** [November 14, 2019, 4:10pm UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886/2 "2019-11-14T16:10:50Z")
As far as I know its not possible yet. > > > \*\*Kibana version:\*\*6.3.0 > \*\*Elasticsearch version:\*\*6.3.0 > \*\*Server OS version:\*\*Win 7 professional > \*\*Browser version:\*\*Google Chrome 59.0.3071.104 > \*\*Browser OS version:\*\*Windows > \*\*Original install method (e.g. download page, yum, from source, etc.):\*\*download... ---
**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\ **Post date:** [November 14, 2019, 4:21pm UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886/3 "2019-11-14T16:21:20Z")
cc @nyuriks - can u please shed more light here ? Thanks Rashmi ---
**Author:** ![nashwin2804](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@nashwin2804](https://discuss.elastic.co/u/nashwin2804)\ **Post date:** [November 15, 2019, 10:20am UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886/4 "2019-11-15T10:20:51Z")
Thank you @kilianten for the reply ---
**Author:** ![kilianten](https://avatars.discourse-cdn.com/v4/letter/k/bbce88/32.png) [@kilianten](https://discuss.elastic.co/u/kilianten)\ **Post date:** [November 15, 2019, 12:38pm UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886/5 "2019-11-15T12:38:09Z")
My Pleasure! ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [December 13, 2019, 12:38pm UTC](https://discuss.elastic.co/t/how-to-create-a-scrollable-vega-visualization/207886/6 "2019-12-13T12:38:22Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.