Vegalite chart radial plot problem

Hello, I can’t display this vegalite graph. it is however the example of the vegalite documentation. Where is my mistake?

Then I would like to replace the values ​​contained on the “data” line

st.vega_lite_chart({

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "description": "A simple radial chart with embedded data.",

  "data": {

    "values": [12, 23, 47, 6, 52, 19]

  },

  "layer": [{

    "mark": {"type": "arc", "innerRadius": 20, "stroke": "#fff"}

  },{

    "mark": {"type": "text", "radiusOffset": 10},

    "encoding": {

      "text": {"field": "data", "type": "quantitative"}

    }

  }],

  "encoding": {

    "theta": {"field": "data", "type": "quantitative", "stack": True},

    "radius": {"field": "data", "scale": {"type": "sqrt", "zero": True, "rangeMin": 20}},

    "color": {"field": "data", "type": "nominal", "legend": None}

  }

})

Hi @Bastien_Angeloz, welcome to the Streamlit community!

When I run this example in the browser, the console shows the following warnings:

In this case, it looks like there is a mismatch in the supported Vega-Lite version, where you are trying to use a newer version than supported by Streamlit. Would you happen to be able to find a Vega-Lite version 4 of the same chart?

Best,
Randy

You might try upgrading Streamlit @Bastien_Angeloz, as support for this version of Vega Lite was just added to Streamlit 1.10.0:

Best,
Randy

Hi @randyzwitch .

I will try this quickly :star_struck:.

Thanks for the help given

HI @randyzwitch

I tried with streamlit 1.10.
always fail. I find the same error as you and my initial error.

I managed to plot with altair but I find that customization is more difficult than with vega and its format.

I managed to plot other graphics in vega and yet when I work on the vega editor, everything is fine. On the contrary when I plot with st.vega, it adds lines which gives me the error that you found during your first message. these lines are visible when we open the graph (which is not visible) from the streamlit application with the vega editor.


at the end, i have used altair :)!

1 Like