Pie chart with Text Color doesn't change

[levinaanora]

Hi guys, I'm developing streamlit dashboard with altair chart but I got problem with text color that I can't change to the color I want.
I have search all tutorial but I think it should work. Here I share the code:

import streamlit as st
import pandas as pd
import altair as alt

data = pd.DataFrame({
      'category': ['A', 'B', 'C', 'D'],
      'value': [25, 30, 15, 30],
      'apple_sold': [True, False, True, False]
  })
  chart_pic = alt.Chart(data).mark_arc(outerRadius=120).encode(
      theta=alt.Theta('value', stack=True),
      color=alt.Color('category')
  )
  text = chart_pic.mark_text(radius=160, size=20, align='center', color='white').encode(
      text=alt.Text('value')
  )
  st.altair_chart(chart_pic+text)

I want to move the text inside the pie chart, but with that condition, I should change the color so the text will shown as white color.
I know that to move the text inside the chart, I can lower the radius of the text. But the color inside mark_text() doesn't work.
Is there any missing procedure?
This is the preview chart with that code:

[ChristopherDavisUCI]

Hi, I think the problem is that the text chart inherits color=alt.Color('category') from chart_pic, and that part is taking precedence. (I believe specifications inside encode take precedence over specifications inside mark_....) I think it will work if you use color=alt.value('white') inside the encode of text.

It's probably a little more elegant to create a third base Chart that only includes the pieces you want shared, like in this example: https://altair-viz.github.io/gallery/layered_heatmap_text.html

[levinaanora]

It works, but the text placement is not in order of the pie chart

Here I modified the code as you suggested. Any idea?

import streamlit as st
import pandas as pd
import altair as alt

data = pd.DataFrame({
      'category': ['A', 'B', 'C', 'D'],
      'value': [25, 30, 15, 30],
      'apple_sold': [True, False, True, False]
  })
  chart_pic = alt.Chart(data).mark_arc(outerRadius=120).encode(
      theta=alt.Theta('value', stack=True),
      color=alt.Color('category')
  )
  text = chart_pic.mark_text(radius=100, size=20, align='center').encode(
      text=alt.Text('value'),
      color=alt.value('white')
  )
  st.altair_chart(chart_pic+text)

[ChristopherDavisUCI]

It seems like this may be a bug related to changing the color: #2909 (comment)
Does the following produce the desired chart? I added order=alt.Order(field="category") based on what was suggested in the above linked comment.

import pandas as pd
import altair as alt

data = pd.DataFrame({
      'category': ['A', 'B', 'C', 'D'],
      'value': [25, 30, 15, 30],
      'apple_sold': [True, False, True, False]
  })
chart_pic = alt.Chart(data).mark_arc(outerRadius=120).encode(
  theta=alt.Theta('value', stack=True),
  color=alt.Color('category')
)
text = chart_pic.mark_text(radius=100, size=20, align='center').encode(
  text=alt.Text('value'),
  color=alt.value('white'),
  order=alt.Order(field="category")
)

st.altair_chart(chart_pic+text)

[levinaanora]

Yes!! This is what I need. Thank you. But I wonder if the angle of pie chart is smaller than the text size, is it possible to add condition if the pie size is smaller than the text then don't show text in that pie slice?

[ChristopherDavisUCI]

Great! I'm not aware of a way to automate not showing the text, but maybe you could use a condition like in this example: https://altair-viz.github.io/gallery/bar_chart_with_negatives.html I'm picturing something like opacity = alt.condition(alt.datum.value > 20, alt.value(1), alt.value(0)) in the text chart, but I didn't test this out myself, and there might also be a more elegant approach...