Skip to content

cannot remove border around the plot #3918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
lingtalfi opened this issue May 28, 2019 · 7 comments
Closed

cannot remove border around the plot #3918

lingtalfi opened this issue May 28, 2019 · 7 comments
Labels
bug something broken

Comments

@lingtalfi
Copy link

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>

Screenshot 2019-05-28 at 14 47 01
@etpinard
Copy link
Contributor

etpinard commented Jun 7, 2019

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

@etpinard
Copy link
Contributor

etpinard commented Jun 7, 2019 •
edited
Loading

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
Copy link
Author

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
Copy link
Author

lingtalfi commented Jun 8, 2019 •
edited
Loading

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
Copy link
Contributor

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

@etpinard etpinard added the bug something broken label Jun 14, 2019
@NadiaP7406
Copy link

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug something broken
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lingtalfi @gvwilson @NadiaP7406 @etpinard