cannot remove border around the plot

[lingtalfi]

Hi, I cannot (don't know how to) remove the borders around the plot.

Here is my code, along with the screenshot (faking an instagram stat widget for an admin gui),
and we can see the small black-ish border between the top yellow part and the bottom white part, is there a way to remove it?

<div class="col-sm-6 col-lg-3 mb-3">
    <div class="card social-card">
        <div class="card-header bg-instagram">
            <i class="fab fa-instagram"></i>
            <div class="plot" id="plot-instagram-1"></div>
            <script>
                var trace1 = {
                    x: [1, 2, 3, 4, 5, 6],
                    y: [120, 150, 30, 30, 150, 120],
                    type: 'lines',
                    fill: 'tozeroy',
                    mode: 'lines',
                    line: {
                        color: '#ffed90',
                        shape: "spline",
                        smoothing: 1.3,
                    }
                };
                var data = [trace1];
                Plotly.newPlot('plot-instagram-1', data, {
                    margin: {
                        l: 0,
                        r: 0,
                        b: 0,
                        t: 0,
                        pad: 0,
                    },
                    xaxis: {
                        showgrid: false,
                    },
                    yaxis: {
                        showgrid: false,
                        range: [0, 180],
                    },
                    height: 100,
                    showlegend: false,
                    plot_bgcolor: "#fbad50",
                    paper_bgcolor: "#fbad50",
                }, {
                    responsive: true,
                    staticPlot: true,
                });

            </script>
        </div>
        <div class="card-body">
            <div>
                <div class="text-number">702</div>
                <div class="text-uppercase text-muted small">followers</div>
            </div>
            <div>
                <div class="text-number">54</div>
                <div class="text-uppercase text-muted small">posts</div>
            </div>
        </div>
    </div>
</div>

[etpinard]

Hi, could you share the CSS you're using (ideally in a reproducible codepen) to help us debug?

[etpinard]

By the way, have you tried generating an image instead, using Plotly.toImage client-side or using orca or the plot.ly export server and insert the results in an <img>?

[lingtalfi]

Hi, could you share the CSS you're using (ideally in a reproducible codepen) to help us debug?

Here is a code pen: https://codepen.io/lingtalfi/pen/eaqgBY

[lingtalfi]

By the way, have you tried generating an image instead, using Plotly.toImage client-side or using orca or the plot.ly export server and insert the results in an <img>?

No, I haven't. I have thought about using an image though (reworked with photoshop), and it's indeed a simpler solution for this use case, plus we have total control on the image. However if we want to change the curvature, we need to reopen photoshop, which is arguably NOT a big deal.

But my question was more about trying to fix a problem if there is one. From my experiments, I couldn't find a css bug, so I assumed it came from plotly (I might be wrong though, being an advanced css user, but not the most expert guy). And so if it comes from plotly, although it's not a big deal, in an ideal world the issue should be at least raised, and in the best case scenario fixed.

The end goal: making plotly an even better library.

[etpinard]

From my experiments, I couldn't find a css bug, so I assumed it came from plotly

You're probably right, our in-house CSS knowledge is rather poor (apart from @antoinerg 😏 )

And so if it comes from plotly, although it's not a big deal, in an ideal world the issue should be at least raised, and in the best case scenario fixed.

Absolutely. Thanks very much for opening an issue!! My static-image workaround was simply a suggestion to improve your project (importing many KBs of plotly.js javascript just to draw a spline sounded less-than-ideal to my ears).

I'll tag this a bug until we can confirm we aren't doing anything wrong.

Related: #3861 // #1902

[NadiaP7406]

I'm working with Plotly in Dash and this worked for me: figure = px.choropleth(df, locations="Alpha3",
color="nat_logo").update_traces(marker_line_color='#000000')

[gvwilson]

Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson