vega-lite bar chart stacked colored values

Question

 "data": {"values": [{
                "key": "test1",
                "doc_count": 14,
                "misc": {                       
                    "min": 5,
                    "max": 8,
                    "avg": 6.5                        
                }
            },
            {
                "key": "test2",
                "doc_count": 14,
                "misc": {                        
                    "min": 2,
                    "max": 8,
                    "avg": 4.5                       
                }
            }]}

Given this data a need to paint a stacked bar chart with 3 colors per each bar for min.avg and max. Currently i can not find any solution for this because this is already an aggregation coming from elastic and all examples i´ve seen for stacked bar chart use the color scale for a fields value but i need the same for 3 fields.

Is it possible with this source data ?

It's unclear what you mean by painting 3 colors per bar... do you mean three bars, each of a different color, with height reflecting the min/max/avg? — jakevdp
Can you be more specific about how you want the three values/colors to appear on each of the two bars? — jakevdp

kanitw kanitw · Accepted Answer · 2018-12-21T18:58:47

You may want to use the fold transform to convert data into long format.

{"fold": ["misc.min", "misc.max","misc.avg"]}

should work. If it doesn't work due to nested data, you can use calculate to flatten each field first (e.g., `{"calculate": "misc.min", "as": "min"}) and then fold the flattened fields.

vega-lite bar chart stacked colored values

1 Answers