streamlit-echarts icon indicating copy to clipboard operation
streamlit-echarts copied to clipboard

Bump to echart-v5.3

Open zbjdonald opened this issue 1 year ago • 2 comments

Hi, Is there a plan to update echarts to version 5.3? I want to use the value_formatter to display return rates. Sample code worked in pyecharts:

line.add_xaxis(x_list).add_yaxis(column_name, column_data.tolist(),
                                 label_opts=opts.LabelOpts(is_show=False),
                                 yaxis_index=0 if column_name in left_y_labels else 1,
                                 tooltip_opts={'valueFormatter': JsCode(
                                     "(value) => value === null ? '-' : (value * 100).toFixed(2) + '%'")},
                                 is_symbol_show=False)

zbjdonald avatar Mar 30 '23 09:03 zbjdonald

Same here, value_formatter would be really helpful for tooltip customization. Did you manage to solve it somehow else?

EuCot avatar Feb 10 '24 13:02 EuCot

@EuCot

def get_format_tooltip_js_code(decimal_place=2, percent_label=False, reverse=True, separate_symbol='—'):
    """
    return tooltips formater js code
    :param decimal_place: 
    :param percent_label: *100 + %
    :param reverse: tootip display order
    :param separate_symbol: tootil seperate symbol such as  '   ' 3 space,  :
    :return:
    """
    if reverse:
        for_loop_part = '(let i = args.length - 1; i >= 0; i--)'
    else:
        for_loop_part = '(let i = 0; i < args.length; i++)'

    if percent_label:
        value_part = f"${{(value[1] * 100).toFixed({decimal_place})}}%"
    else:
        value_part = f"${{value[1].toFixed({decimal_place})}}"

    ret = f"""
    function (args) {{
        let tooltip = `${{args[0].axisValue}} <br>`;
        for {for_loop_part} {{
            let marker = args[i].marker;
            let seriesName = args[i].seriesName;
            let value = args[i].value;
            if (value[1] === null) {{
                continue;
            }} else {{
                tooltip += `${{marker}} ${{seriesName}} {separate_symbol} <B>{value_part}</B><br>`;
            }}
        }}
        return tooltip;
    }}
    """
    return ret

Usage

line.set_global_opts(title_opts=title_opts,
                     xaxis_opts=opts.AxisOpts(axisline_opts=opts.AxisLineOpts(is_on_zero=False)),
                     yaxis_opts=opts.AxisOpts(min_='dataMin', max_='dataMax',
                                              axislabel_opts=opts.LabelOpts(formatter=JsCode(
                                                  get_format_y_js_code(2, percent_label=True)))),
                     tooltip_opts=opts.TooltipOpts(
                         is_show=True, trigger="axis", axis_pointer_type="shadow",
                         formatter=JsCode(
                             get_format_tooltip_js_code(decimal_place=2, percent_label=True, reverse=False,
                                                        separate_symbol=': '))
                     ),
                     datazoom_opts=opts.DataZoomOpts(range_start=0, range_end=100))

zbjdonald avatar Feb 19 '24 02:02 zbjdonald