Search code examples
jsonvisualizationvega-litevegavega-lite-api

First bar highlight by a specific color in VegaLite Bar chart


I want to create a bar chart in vegalite for top 10 performance students but highest score student at the starting must be with specific color rest all remain same . I want this independent of data mean if data change it does not. Is there any way to as i am getting sorting data i can play with indexing of data. If this possible with any expr or condition in Vegalite . Is this thing can be controlled by param any how.Editor link


Solution

  • enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "description": "A simple bar chart with embedded data.",
      "data": {
        "values": [
          {"student": "A", "marks": 98},
          {"student": "B", "marks": 95},
          {"student": "C", "marks": 90},
          {"student": "D", "marks": 85},
          {"student": "E", "marks": 81},
          {"student": "F", "marks": 78},
          {"student": "G", "marks": 75},
          {"student": "H", "marks": 74},
          {"student": "I", "marks": 71}
        ]
      },
      "transform": [
        {
          "sort": [
            {"field": "marks", "order": "descending"}
          ],
          "window": [{"op": "rank", "as": "rank"}]
        }
      ],
      "mark": {
        "type": "bar",
        "color": {"expr": "datum.rank==1 ? 'gold' : 'silver'"}
      },
      "encoding": {
        "x": {"field": "student", "type": "nominal", "axis": {"labelAngle": 0}},
        "y": {"field": "marks", "type": "quantitative"}
      }
    }