# Why the color rendering is so different in Kibana?
**URL:** https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043
**Category:** Kibana
**Tags:** vega
**Created:** [June 29, 2020, 2:28am UTC](https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043 "2020-06-29T02:28:24Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@zhangyongzhe20](https://discuss.elastic.co/u/zhangyongzhe20)
#### Post date: [June 29, 2020, 2:28am UTC](https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043/1 "2020-06-29T02:28:24Z")
Recently, I noticed the diagram generated by the same color schema in Vega editor and Kibana vega is so different?
I put the two screenshots for comparsion, one is in Vega editor and the other is in Kibana.
Anyone can explain why this happened?
---
### Author:  [@flash1293](https://discuss.elastic.co/u/flash1293)
#### Post date: [June 29, 2020, 8:15am UTC](https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043/2 "2020-06-29T08:15:25Z")
It might be related to the used vega version. Kibana is currently running vega `4.3.0` (I think the most recent one vega editor is likely running is `5.13.0`).
In the upcoming Kibana version 7.9 vega will be upgraded to the most recent version.
There are other possible causes of this, if you share your spec like described here: [https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e) we can look deeper into it.
---
### Author:  [@zhangyongzhe20](https://discuss.elastic.co/u/zhangyongzhe20)
#### Post date: [June 29, 2020, 9:11am UTC](https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043/3 "2020-06-29T09:11:02Z")
First of all, thank you for your reply.
I attached the spec in the blow, btw, when will the kibana version 7.9 be released? Kind of urgent to try it out.
`"{"$schema":"https://vega.github.io/schema/vega/v4.json","description":"A binned scatter plot example showing aggregate counts per binned cell.","width":300,"height":300,"padding":20,"autosize":"pad","data":[{"name":"imageData","url":"https://localhost:1237/statics/version4Pic.json","format":{"type":"json","parse":{"camera":"string","Fimage":"string"}}},{"name":"source","url":"https://localhost:1237/statics/testingData.json","format":{"type":"json","property":"aggregations.camera_heatmap.buckets"},"transform":[{"type":"formula","expr":"datum.key","as":"s1_camera"},{"type":"formula","expr":"datum.doc_count","as":"s1_Tcount"},{"type":"formula","expr":"datum.center_x.buckets","as":"s1_groupX"}]},{"name":"source2Flat","source":"source","transform":[{"type":"formula","expr":"datum.s1_groupX","as":"s2_groupX"},{"type":"flatten","fields":["s2_groupX"]}]},{"name":"source3","source":"source2Flat","transform":[{"type":"formula","expr":"datum.s2_groupX.key","as":"xdata"},{"type":"formula","expr":"datum.s2_groupX.doc_count","as":"s3_Xcount"},{"type":"formula","expr":"datum.s2_groupX.center_y.buckets","as":"s3_groupY"}]},{"name":"source4Flat","source":"source3","transform":[{"type":"formula","expr":"datum.s3_groupY","as":"s4_groupY"},{"type":"flatten","fields":["s4_groupY"]}]},{"name":"source5","source":"source4Flat","transform":[{"type":"formula","expr":"datum.s4_groupY.key","as":"ydata"},{"type":"formula","expr":"datum.s4_groupY.doc_count","as":"color_Count"},{"type":"lookup","from":"imageData","key":"camera","fields":["s1_camera"],"values":["Fimage"],"as":["Fimage"],"default":"https://localhost:1237/statics/pics/group6.jpg"}]}],"signals":[{"name":"Soffset","update":"40"},{"name":"Sheight","update":"height"},{"name":"Swidth","update":"width"},{"name":"rectSize","update":"width/20"},{"name":"opa_rect","on":[{"events":"mousemove","update":"1.0"}]},{"name":"opa_img","on":[{"events":"mousemove","update":"0.2"}]}],"layout":{"bounds":"flush","columns":2,"padding":{"column":{"signal":"Soffset"},"row":{"signal":"2*Soffset"}}},"scales":[{"name":"xscale","type":"linear","domain":{"data":"source5","field":"xdata"},"range":"width"},{"name":"yscale","type":"linear","domain":{"data":"source5","field":"ydata"},"range":"height"},{"name":"color","type":"linear","range":{"scheme":"viridis"},"domain":{"data":"source5","field":"color_Count"},"zero":false,"nice":true}],"marks":[{"name":"group","type":"group","from":{"facet":{"data":"source5","name":"zones","groupby":["s1_camera","Fimage"]}},"encode":{"enter":{"x":{"scale":"xscale","field":"xdata"},"y":{"scale":"yscale","field":"ydata"},"height":{"signal":"Sheight"},"width":{"signal":"Swidth"}},"update":{"x":{"scale":"xscale","field":"xdata"},"y":{"scale":"yscale","field":"ydata"},"height":{"signal":"Sheight"},"width":{"signal":"Swidth"}}},"data":[{"name":"filter_1","source":"zones","transform":[{"type":"filter","expr":"datum.xdata<1 && datum.ydata<1"}]}],"marks":[{"type":"rect","from":{"data":"filter_1"},"encode":{"enter":{"transform":[{"type":"filter","expr":"datum.xdata<0.95"}],"x":{"scale":"xscale","field":"xdata","round":true},"y":{"scale":"yscale","field":"ydata","offset":{"signal":"-rectSize"}},"width":{"signal":"rectSize"},"height":{"signal":"rectSize"},"tooltip":{"signal":"datum.color_Count"},"opacity":{"signal":"opa_rect"}},"update":{"fill":{"scale":"color","field":"color_Count"},"tooltip":{"signal":"datum.color_Count"},"opacity":{"signal":"opa_rect"}}}}]},{"type":"text","from":{"data":"group"},"encode":{"enter":{"fontSize":{"value":15},"text":{"field":"datum.s1_camera"},"x":{"field":"x","offset":{"signal":"4*rectSize"}},"y":{"field":"y","offset":{"signal":"-rectSize"}},"align":{"value":"left"},"baseline":{"value":"bottom"},"fill":{"value":"#000"},"opacity":{"signal":"opa_rect"}},"update":{"x":{"field":"x","offset":{"signal":"4*rectSize"}},"y":{"field":"y","offset":{"signal":"-rectSize"}},"align":{"value":"left"},"fill":{"value":"#000"},"opacity":{"signal":"opa_rect"}}}},{"type":"image","from":{"data":"group"},"encode":{"enter":{"url":{"field":"datum.Fimage"},"width":{"signal":"Swidth"},"height":{"signal":"Sheight"},"x":{"field":"x"},"y":{"field":"y"},"opacity":{"signal":"opa_img"}},"update":{"x":{"field":"x"},"y":{"field":"y"},"opacity":{"signal":"opa_img"}}}}],"config":{"range":{"category":{"scheme":"elastic"}},"arc":{"fill":"#54B399"},"area":{"fill":"#54B399"},"line":{"stroke":"#54B399"},"path":{"stroke":"#54B399"},"rect":{"fill":"#54B399"},"rule":{"stroke":"#54B399"},"shape":{"stroke":"#54B399"},"symbol":{"fill":"#54B399"},"trail":{"fill":"#54B399"}}}"`
---
### Author:  [@flash1293](https://discuss.elastic.co/u/flash1293)
#### Post date: [June 29, 2020, 9:20am UTC](https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043/4 "2020-06-29T09:20:37Z")
It seems like your spec is referencing local files I don't have so I can't really try. But if your spec is not loading data from Elasticsearch, it's likely this is caused by the vega version.
Kibana 7.9 is not expected to be released within the next month (and there is no definitive release date yet).
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [July 27, 2020, 9:20am UTC](https://discuss.elastic.co/t/why-the-color-rendering-is-so-different-in-kibana/239043/5 "2020-07-27T09:20:38Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.