`legend_groupclick = "toggleitem"` doesn't seem to work in PlotlyJS

Specific Domains Visualization
1

Currently legend_groupclick="toggleitem" doesn’t seem to work as can be tested in the result of

using PlotlyJS

function getData()
    x = range(start=0, stop=10, length=101)
    y1 = sin.(x)
    y2 = sin.(x) .- 0.1
    y3 = cos.(x)
    y4 = cos.(x) .- 0.1

    trace1 = scatter(x=x, y=y1, legendgroup="sin", legendgrouptitle_text="sin")
    trace2 = scatter(x=x, y=y2, legendgroup="sin", legendgrouptitle_text="sin")
    trace3 = scatter(x=x, y=y3, legendgroup="cos", legendgrouptitle_text="cos")
    trace4 = scatter(x=x, y=y4, legendgroup="cos", legendgrouptitle_text="cos")

    return [trace1, trace2, trace3, trace4]
end
data = getData()

layout = Layout(legend_groupclick="toggleitem")

fig = Plot(data, layout)

@assert fig.layout.fields[:legend][:groupclick] == "toggleitem"

open("plotly_julia.html", "w") do io
    PlotlyBase.to_html(io, fig)
end

Am I doing something wrong here? If not, is this a Julia issue and I can file an issue at that repository or is this because the same bug exists in the JavaScript library as can be seen in the filed issue?

https://github.com/plotly/plotly.js/issues/5910

In Python there also was this bug, but it was fixed as can be seen at

https://github.com/plotly/plotly.py/issues/3488

And here the same code as above in python to prove that it works

import numpy as np
import plotly.graph_objects as go


x = np.linspace(0, 10, 100)
y1 = np.sin(x)
y2 = np.cos(x)

fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y1 - 0.0, legendgroup='sin', legendgrouptitle_text='sin'))
fig.add_trace(go.Scatter(x=x, y=y1 - 0.1, legendgroup='sin', legendgrouptitle_text='sin'))
fig.add_trace(go.Scatter(x=x, y=y2 - 0.0, legendgroup='cos', legendgrouptitle_text='cos'))
fig.add_trace(go.Scatter(x=x, y=y2 - 0.1, legendgroup='cos', legendgrouptitle_text='cos'))

fig.update_layout(legend_groupclick='toggleitem')

fig.write_html('plotly_python.html')
2

Maybe also related

https://github.com/JuliaPlots/PlotlyJS.jl/issues/118

3

For the record. The issue seems to be that the requested feature was introduced in Plotly.js v2.4.1, but PlotlyBase.jl currently refers to v2.3.0.

4

Is there a chance to use this feature by means of low level commands?

5

The package PlotlyLight.jl knows about the feature: groupclick.
Here is my sample code:

using PlotlyLight
# --- Docu: https://plotly.com/javascript/

# --- Change template
# PlotlyLight.Preset.Template.plotly_dark!()
# --- Make plot, first two traces at once in two legendgroups:
fig_obj = PlotlyLight.Plot()(
        x = 1:20, y = cumsum(randn(20)), type="scatter", mode="lines+markers",
        legendgroup = "A",  legendgrouptitle = Dict("text" => "group_name A"),)(
        x = 1:20, y = cumsum(randn(20)), type="scatter", mode="lines+markers",
        legendgroup = "B",  legendgrouptitle = Dict("text" => "group_name B"),);
# --- add new trace:
fig_obj()(
    x = 1:20, y = cumsum(randn(20)), type="scatter", mode="lines+markers", legendgroup = "B", name = "new trace");

# ---
fig_obj.layout.legend.groupclick = "toggleitem"
display(fig_obj)
7

Good news, since August 2025, it works :slight_smile:
Here my sample code:

using PlotlyJS
xToggleGroup = true
#: ---
function toggle_item(xTogglegroup::Bool=true)
    x = range(start=0, stop=10, length=101)
    y1 = sin.(x)
    y2 = sin.(x) .- 0.1
    y3 = cos.(x)
    y4 = cos.(x) .- 0.1
    #: ---
    trace1 = PlotlyJS.scatter(x=x, y=y1, legendgroup="sin", legendgrouptitle_text="sin")
    trace2 = PlotlyJS.scatter(x=x, y=y2, legendgroup="sin", legendgrouptitle_text="sin")
    trace3 = PlotlyJS.scatter(x=x, y=y3, legendgroup="cos", legendgrouptitle_text="cos")
    trace4 = PlotlyJS.scatter(x=x, y=y4, legendgroup="cos", legendgrouptitle_text="cos")
    #: ---
    traces = [trace1, trace2, trace3, trace4]
    if xTogglegroup
        sGroupClickItem = "togglegroup"
    else
        sGroupClickItem = "toggleitem"
    end
    layout = PlotlyJS.Layout(
        legend = PlotlyJS.attr(          # ← nested mit attr()
            groupclick = sGroupClickItem   # "toggleitem" oder "togglegroup" je nach Wunsch
        )
    )
    return PlotlyJS.Plot(traces, layout)
end

fig = toggle_item(xToggleGroup);       PlotlyJS.display(fig)    

# Save as html
if xToggleGroup
    fn_html = raw"c:\tmp\plt\legend_groupclick_togglegroup.html"
else
    fn_html = raw"c:\tmp\plt\legend_groupclick_toggleitem.html"
end
open(fn_html, "w") do io
    PlotlyBase.to_html(io, fig)
end
@info "\"$fn_html\" plotted!"```
1 Like