How can i change the fontFamily of a chart in ECharts?

[nevo]

Introduction

Hello everyone! I’m working on a simple bar chart using streamlit-echarts and I’m having trouble changing the font. Despite my efforts, the chart doesn’t seem to pick up the font specified in my CSS. Other Streamlit features like st.write apply the font correctly without any issues.
I set the renderer to ‘svg’ intentionally because I read that it is supposed to work better than ‘canvas,’ as explained in this issue

Required Information

1. Are you running your app locally or is it deployed?

   Locally

2. Share the link to your app’s public GitHub repository:

   Link To Repository

3. Share the full text of the error message (not a screenshot):

Click me

        GET https://cdn.segment.com/analytics.js/v1/iCkMy7ymtJ9qYzQRXkQpnAJEq7D4NyMU/analytics.min.js net::ERR_BLOCKED_BY_CLIENT
   actuallySendMetrics.e.load @ main.7e6f4f72.js:2
   (anonymous) @ main.7e6f4f72.js:2
   initialize @ main.7e6f4f72.js:2
   Cp.handleOneTimeInitialization @ main.7e6f4f72.js:2
   Cp.handleNewSession @ main.7e6f4f72.js:2
   newSession @ main.7e6f4f72.js:2
   (anonymous) @ main.7e6f4f72.js:2
   Cp.handleMessage @ main.7e6f4f72.js:2
   handleMessage @ main.7e6f4f72.js:2
   await in handleMessage (async)
   websocket.onmessage @ main.7e6f4f72.js:2
   
   main.7e6f4f72.js:2
   Unrecognized feature: 'ambient-light-sensor'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'battery'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'document-domain'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'layout-animations'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'legacy-image-formats'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'oversized-images'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'vr'.
   main.7e6f4f72.js:2
   Unrecognized feature: 'wake-lock'.
   index.html:1
   An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
 

4. Share the Streamlit and Python versions:
   • Streamlit version: 1.34.0
   • Python version: 3.10.4

Any insights on how to get the chart to recognize the font from the CSS would be greatly appreciated. Thanks in advance for your help!

[Charly_Wargnier]

Hey @nevo

You need to make sure the font is loaded properly and referenced correctly in the ECharts options – Here’s a code example that I tried:

import streamlit as st
from streamlit_echarts import st_echarts

st.markdown("""
<style>
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
</style>
""", unsafe_allow_html=True)

options = {
    "title": {
        "text": "ECharts with Comic Neue",
        "left": "center",
        "textStyle": {
            "fontFamily": "Comic Neue, cursive"  # Specify Comic Neue here
        }
    },
    "tooltip": {
        "trigger": "item"
    },
    "legend": {
        "orient": "vertical",
        "left": "left",
        "textStyle": {
            "fontFamily": "Comic Neue, cursive"  # Specify Comic Neue here
        }
    },
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        "axisLabel": {
            "fontFamily": "Comic Neue, cursive"  # Specify Comic Neue here
        }
    },
    "yAxis": {
        "type": "value",
        "axisLabel": {
            "fontFamily": "Comic Neue, cursive"  # Specify Comic Neue here
        }
    },
    "series": [
        {
            "data": [120, 200, 150, 80, 70, 110, 130],
            "type": "bar",
            "label": {
                "show": True,
                "fontFamily": "Comic Neue, cursive"  # Specify Comic Neue here
            }
        }
    ],
    "textStyle": {
        "fontFamily": "Comic Neue, cursive"  # Specify Comic Neue here
    }
}

st_echarts(options=options, height="400px")

[Charly_Wargnier]

Here’s how it looks like:

I hope that helps!

Best,
Charly

[nevo]

Thank you very much for your answer! It seems like the code you provided references the generic ‘cursive’ font-family instead of specifically referring to ‘Comic Neue’. As you’ll see in the code example below, you don’t need to import the ‘Comic Neue’ font to achieve a similar effect.

import streamlit as st
from streamlit_echarts import st_echarts

options = {
    "title": {
        "text": "Example",
        "left": "center",
        "textStyle": {
            "fontFamily": "cursive"
        }
    },
    "tooltip": {
        "trigger": "item"
    },
    "legend": {
        "orient": "vertical",
        "left": "left",
        "textStyle": {
            "fontFamily": "cursive"
        }
    },
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        "axisLabel": {
            "fontFamily": "cursive"
        }
    },
    "yAxis": {
        "type": "value",
        "axisLabel": {
            "fontFamily": "cursive"
        }
    },
    "series": [
        {
            "data": [120, 200, 150, 80, 70, 110, 130],
            "type": "bar",
            "label": {
                "show": True,
                "fontFamily": "cursive"
            }
        }
    ],
    "textStyle": {
        "fontFamily": "cursive"
    }
}

st_echarts(options=options, height="400px")

Here’s the result:

And this is how the font should look:

My goal is to use a custom font, such as Jost, instead of the generic ones provided by ECharts by default.

[Charly_Wargnier]

Thanks for the heads-up. I’m not sure if importing custom fonts using CSS would work in Echarts. Here’s an example:

st.markdown("""
<style>
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
</style>
""", unsafe_allow_html=True)

I can’t test it locally right now, but I have a suspicion that Echarts might not accept this CSS hack!

Best,
Charly