admin管理员组

文章数量:1302350

I am working on creating a funnel chart using vega lite but facing an issue while placing text at the center of each bar.

Below is the vega lite spec.


{
  "$schema": ".json",
  "encoding": {
    "y": {"field": "department", "type": "nominal", "sort": "-x"},
    "x": {
      "field": "daily_total_login",
      "type": "quantitative",
      "stack": "center"
    }
  },
  "layer": [
    {
      "mark": {"tooltip": true, "type": "bar"},
      "encoding": {
        "x": {
          "field": "daily_total_login",
          "type": "quantitative",
          "stack": "center"
        },
        "color": {"field": "department", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "daily_total_login", "type": "quantitative"}
      },
    }
  ],
  "data": {
    "values": [
      {
        "date": "2024-08-09",
        "department": "A",
        "daily_total_login": 277,
        "daily_active_user": 87
      },
      {
        "date": "2024-08-10",
        "department": "B",
        "daily_total_login": 36,
        "daily_active_user": 9
      },
      {
        "date": "2024-08-11",
        "department": "C",
        "daily_total_login": 39,
        "daily_active_user": 14
      },
      {
        "date": "2024-08-12",
        "department": "D",
        "daily_total_login": 124,
        "daily_active_user": 51
      },

    ]
  },
  "height": "container",
  "width": "container"
}

With the output as below:

Could anyone please suggest what changes I could make in the above vega lite spec, so that the text could appear at the center of each bar?

I am working on creating a funnel chart using vega lite but facing an issue while placing text at the center of each bar.

Below is the vega lite spec.


{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "encoding": {
    "y": {"field": "department", "type": "nominal", "sort": "-x"},
    "x": {
      "field": "daily_total_login",
      "type": "quantitative",
      "stack": "center"
    }
  },
  "layer": [
    {
      "mark": {"tooltip": true, "type": "bar"},
      "encoding": {
        "x": {
          "field": "daily_total_login",
          "type": "quantitative",
          "stack": "center"
        },
        "color": {"field": "department", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "daily_total_login", "type": "quantitative"}
      },
    }
  ],
  "data": {
    "values": [
      {
        "date": "2024-08-09",
        "department": "A",
        "daily_total_login": 277,
        "daily_active_user": 87
      },
      {
        "date": "2024-08-10",
        "department": "B",
        "daily_total_login": 36,
        "daily_active_user": 9
      },
      {
        "date": "2024-08-11",
        "department": "C",
        "daily_total_login": 39,
        "daily_active_user": 14
      },
      {
        "date": "2024-08-12",
        "department": "D",
        "daily_total_login": 124,
        "daily_active_user": 51
      },

    ]
  },
  "height": "container",
  "width": "container"
}

With the output as below:

Could anyone please suggest what changes I could make in the above vega lite spec, so that the text could appear at the center of each bar?

  • json
  • visualization
  • vega-lite
  • vega
Share Improve this question edited Feb 10 at 18:13 DarkBee 15.6k8 gold badges72 silver badges116 bronze badges asked Feb 10 at 17:59 Raghav MittalRaghav Mittal 696 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 2 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "encoding": {
    "y": {"field": "department", "type": "nominal", "sort": "-x"},
    "x": {
      "field": "daily_total_login",
      "type": "quantitative",
      "stack": "center"
    }
  },
  "layer": [
    {
      "mark": {"tooltip": true, "type": "bar"},
      "encoding": {
        "color": {"field": "department", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "daily_total_login", "type": "quantitative"},
        "x": {
          "datum":{"expr":"invert('x',width/2)"}
          
        }
      }
    }
  ],
  "data": {
    "values": [
      {
        "date": "2024-08-09",
        "department": "A",
        "daily_total_login": 277,
        "daily_active_user": 87
      },
      {
        "date": "2024-08-10",
        "department": "B",
        "daily_total_login": 36,
        "daily_active_user": 9
      },
      {
        "date": "2024-08-11",
        "department": "C",
        "daily_total_login": 39,
        "daily_active_user": 14
      },
      {
        "date": "2024-08-12",
        "department": "D",
        "daily_total_login": 124,
        "daily_active_user": 51
      }
    ]
  },
  "height": "container",
  "width": "container",
}

本文标签： jsonHow to place text at the center for a funnel chartStack Overflow

版权声明：本文标题：json - How to place text at the center for a funnel chart? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741699850a2393222.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。