# |safe outputs unicode (using for data visualization: Plotly/Bokeh)

**URL:** <https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092>\
**Category:** Deployment\
**Created:** [April 1, 2025, 6:35am UTC](https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092 "2025-04-01T06:35:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kkvero](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kkvero/32/25498_2.png) [@kkvero](https://forum.djangoproject.com/u/kkvero)\
**Post date:** [April 1, 2025, 6:35am UTC](https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092/1 "2025-04-01T06:35:42Z")

</div>

To embed an interactive chart with tools like Plotly or Bokeh in a Django project, procedure:

- in views.py Plotly: `fig=fig.to_html()`, Bokeh: `script1, div1 = components(p)`
- in template Plotly: `{{ fig|safe }}`, Bokeh: `{{ script1|safe } {{ div1|safe }}`

What works:

- Using both libraries the charts display fine, locally in dev.

What doesn’t work:

- Non-Latin data (title, labels) are displayed as unicode. In plotly also `<br>` tag displayed as unicode (which means the issue is not necessarily about the language).
- `MemoryError` when deploying to a server (tested Plotly), pointing at the line with `fig=fig.to_html()`. (I am not using much data, it is a simple chart.)

The fact that the issue (unicode characters) repeats for both libraries probably means that the cause lies with Django.

Question:  
How to embed interactive charts directly in Django minding international users with non-Latin data?

Any clues on `MemoryError` are also welcomed.

---

<div class="post-metadata">

**Author:** ![boxed](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/boxed/32/11975_2.png) [@boxed](https://forum.djangoproject.com/u/boxed)\
**Post date:** [April 1, 2025, 9:10am UTC](https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092/2 "2025-04-01T09:10:58Z")

</div>

> displayed as unicode

What does that mean? Do you mean _escaped_ unicode or something?

---

<div class="post-metadata">

**Author:** ![kkvero](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kkvero/32/25498_2.png) [@kkvero](https://forum.djangoproject.com/u/kkvero)\
**Post date:** [April 1, 2025, 9:28am UTC](https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092/3 "2025-04-01T09:28:07Z")

</div>

Means in chart it would display something like “\u031f\u0435…” for a German word “für”. And something like “\u003cbr\u003e” for `<br>`, i.e. where there should be a new line in hover labels. Then labels appear on the same line with “\u003cbr\u003e” in between.

---

<div class="post-metadata">

**Author:** ![boxed](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/boxed/32/11975_2.png) [@boxed](https://forum.djangoproject.com/u/boxed)\
**Post date:** [April 1, 2025, 11:46am UTC](https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092/4 "2025-04-01T11:46:35Z")

</div>

What does the HTML look like? Does it look correct?

---

<div class="post-metadata">

**Author:** ![kkvero](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kkvero/32/25498_2.png) [@kkvero](https://forum.djangoproject.com/u/kkvero)\
**Post date:** [April 1, 2025, 4:22pm UTC](https://forum.djangoproject.com/t/safe-outputs-unicode-using-for-data-visualization-plotly-bokeh/40092/5 "2025-04-01T16:22:37Z")

</div>

The html, looks like:

- with `fig=fig.to_html()` and `{{ fig|safe }}`

```html
<text class="legendtext" text-anchor="start" style="font-family: ..." 
x="40" y="7.8" data-unformatted="\u0410\...u040b" 
data-math="N">\u0410\...\u040b</text>

```

- with `fig=fig.to_html()` and `{{ fig }}`

```html
"hovertemplate":"%{label}: %{value}","labels":["\u0442\u043..","\u043c\u0443\...\u0430",...]

```

Looks like `{{ fig|safe }}` already receives data in this format “\u..”

By the way, I also generated a static version of the chart with Plotly and it looks fine (non-Latin text appears correct). When generating a static chart what gets omitted in code is `fig=fig.to_html()` and `{{ fig|safe }}`.