Hide trace initially in pie chart

plotly.js
1

How do i hide trace initially in a pie chart?

Just like how it is done here

2

Hi @pdso002
Welcome to the community.

With pie charts, when you fig.add_trace, you actually are attending a new pie chart for every trace. And I don’t think you can toggle the complete legend of a new pie chart.

Is that what you’re trying to do? Would you like to have two pie charts and initially hide one of them?

3

Hi, I am not sure about using fig.add_trace.

Say for example we try this on codepen

HTML:

> <head>  <!-- Load plotly.js into the DOM -->    
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script> 
> </head>
> 
> <body>  
>   <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div> 
> </body>

JS

var data = [{   values: [19, 26, 55],   labels: ['Residential', 'Non-Residential', 'Utility'],   type: 'pie' }];

var layout = {   height: 400,   width: 500 };

Plotly.newPlot('myDiv', data, layout);

How do I hide one of the trace by default initially? Say for this example, I only wish 2/3 values on legend to show on the pie chart. Show Residential and Non-Residential on Pie chart only and toggle off Utility. I dont want to remove the utility data, it needs to be present but not show on the pie chart by default. Later if i wish to add it on, I can just select Utility and show all three values on Pie chart.

4

oh, now I see what you’re looking for. Try the hiddenlabels attribute:

import plotly.express as px
df = px.data.tips()
fig = px.pie(df, values='tip', names='day')
fig.update_layout(hiddenlabels=['Fri'])
fig.show()
1 Like
5

Yup that is what I am looking for. Any idea how we do that with JavaScript?

6

Hi @pdso002
see the codepen posted by etienne.