Search code examples
python-3.xcolorsplotlybar-chartticker

Individually color ticks of a plotly.graph_objects.Bar

I have a multi-index dataframe dfc which I want to plot as a bar chart with the color of the tick on the yaxis depending on the value of dfc.iloc[i].values[1] for any value i.

                                                           Unnamed: 1  claimed_benefit  perceived_benefit
My Burberry - Eau de Parfum                           je me sens bien                0           0.000000
Her Intense - Eau de Parfum                         convient bien moi                0           0.000000
Her Intense - Eau de Parfum                          sensuelle / sexy                0           0.000000
Her Intense - Eau de Parfum                                  nettoyer                0           0.000000
Her Intense - Eau de Parfum                             haute qualite                0           0.000000
...                                                               ...              ...                ...
Mr. Burberry Indigo - Eau de Toilette  nouveau / jamais respire avant                0           0.666667

In order to achieve that I tried this answer by updating the ticktext value of the yaxis property in the layout, as it seems that plotly has full LaTeX support.

traces = []
ticks = []
colors = []
for i in range(len(dfc)):
    if dfc.iloc[i].name == my_dropdown:
        trace_claimed = go.Bar(y=[dfc.iloc[i].values[0]], x=[dfc.iloc[i].values[2]],
                               name=dfc.iloc[i].values[0] + ' Perceived', orientation='h')

        tick = dfc.iloc[i].values[0]

        if dfc.iloc[i].values[1] > 0:
            color = 'red'
        else:
            color = 'blue'

        ticks.append(tick)
        colors.append(color)
        traces.append(trace_claimed)
            # traces.append(trace_perceived)

keys = dict(zip(ticks, colors))
ticktext = [get_color(v, k) for k, v in keys.items()]


figure = go.Figure(data=traces,
                   layout=go.Layout(title='Score des parfums sur les attributs',
                                    barmode='stack')
                   )

figure.update_layout(
    yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
)

However it only produces a weird text for the ticks:

enter image description here

Here is the ticktext value:

['$\\color{blue}{je me sens bien}$', '$\\color{blue}{harsh / agressif}$', '$\\color{blue}{boisé}$', '$\\color{blue}{écœurant}$', '$\\color{blue}{strength1}$', ..., '$\\color{red}{frais}$', '$\\color{blue}{pour le soir / nuit}$', '$\\color{blue}{doux}$']

Here is a minimal reproducible example:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
from os.path import abspath, dirname, join

app = Dash(__name__)


def get_color(color, text):
    s = '$\color{' + str(color) + '}{' + str(text) + '}$'
    return s


df = pd.read_csv('some_file.csv')


def layout():
    return html.Div([
        dcc.Dropdown(
            id='perfume-dropdown',
            options=[{'label': x, 'value': x} for x in df.index.unique()],
            value='My Burberry - Eau de Parfum'
        ),
        html.Div(id='dd-output-container'),
        html.Div([
            dcc.Graph(id='graph-attributes')
        ])
    ])

@app.callback(
    Output(component_id='graph-attributes', component_property='figure'),
    [Input(component_id="perfume-dropdown", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df.sort_values(by='perceived_benefit', ascending=True)
    traces = []
    ticks = []
    colors = []
    for i in range(len(dfc)):
        if dfc.iloc[i].name == my_dropdown:
            trace_claimed = go.Bar(y=[dfc.iloc[i].values[0]], x=[dfc.iloc[i].values[2]],
                                   name=dfc.iloc[i].values[0] + ' Perceived', orientation='h')

            tick = dfc.iloc[i].values[0]

            if dfc.iloc[i].values[1] > 0:
                color = 'red'
            else:
                color = 'blue'

            ticks.append(tick)
            colors.append(color)
            traces.append(trace_claimed)
                # traces.append(trace_perceived)

    keys = dict(zip(ticks, colors))
    ticktext = [get_color(v, k) for k, v in keys.items()]

    print(ticktext)

    figure = go.Figure(data=traces,
                       layout=go.Layout(title='Score des parfums sur les attributs',
                                        barmode='stack')
                       )

    figure.update_layout(
        yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
    )

    return figure
Solution

  • Using the approach from here with your code, and the following some_file.csv:

    name,claimed,perceived
A,0,1
B,1,2
C,0,3
D,1,4

    We can achieve this (with my sample): enter image description here

    Through adding two things:

    pip install dash_defer_js_import

    and

    import dash_defer_js_import as dji
mathjax_script = dji.Import(src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS-MML_SVG")

[...]

def layout():
    return html.Div([
        dcc.Dropdown(
            id='perfume-dropdown',
            options=[{'label': x, 'value': x} for x in df.index.unique()],
            value='My Burberry - Eau de Parfum'
        ),
        html.Div(id='dd-output-container'),
        html.Div([
            dcc.Graph(id='graph-attributes')
        ]),
        mathjax_script # use the script here
    ])

    All in all:

    import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
from os.path import abspath, dirname, join
from dash import Dash

app = Dash(__name__)

import dash_defer_js_import as dji
mathjax_script = dji.Import(src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS-MML_SVG")

def get_color(color, text):
    s = '$\color{' + str(color) + '}{' + str(text) + '}$'
    return s


df = pd.read_csv('some_file.csv')


def layout():
    return html.Div([
        dcc.Dropdown(
            id='perfume-dropdown',
            options=[{'label': x, 'value': x} for x in df.index.unique()],
            value='My Burberry - Eau de Parfum'
        ),
        html.Div(id='dd-output-container'),
        html.Div([
            dcc.Graph(id='graph-attributes')
        ]),
        mathjax_script
    ])


@app.callback(
    Output(component_id='graph-attributes', component_property='figure'),
    [Input(component_id="perfume-dropdown", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df.sort_values(by='perceived', ascending=True)
    traces = []
    ticks = []
    colors = []
    for i in range(len(dfc)):
        if dfc.iloc[i].name == my_dropdown:
            trace_claimed = go.Bar(y=[dfc.iloc[i].values[0]], x=[dfc.iloc[i].values[2]],
                                   name=dfc.iloc[i].values[0] + ' Perceived', orientation='h')

            tick = dfc.iloc[i].values[0]

            if dfc.iloc[i].values[1] > 0:
                color = 'red'
            else:
                color = 'blue'

            ticks.append(tick)
            colors.append(color)
            traces.append(trace_claimed)
            # traces.append(trace_perceived)

    keys = dict(zip(ticks, colors))
    ticktext = [get_color(v, k) for k, v in keys.items()]

    print(ticktext)

    figure = go.Figure(data=traces,
                       layout=go.Layout(title='Score des parfums sur les attributs',
                                        barmode='stack')
                       )

    figure.update_layout(
        yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
    )

    return figure


if __name__ == '__main__':
    app.layout = layout()
    app.run_server(debug=True)

    Picture without a dropdown menu: enter image description here