How to add ID to outermost <div> tag of plotly chart using plotly JSON dumps (from python app)?

Question

I would like to be able to use my own CSS on elements of the plotly chart, especially the outermost <div> tag. Right now, though, the element is created without an ID. Is there a way to add an HTML id name to the <div> ? Hopefully it would either be when I create the plot in python, or when I add to plot to my page using javascript. I tried to make a minimum verifiable example below, but I can do "run code snippet" because I would need to include the giant JSON dump.

I am using flask to display the output of this, but I have not included code for the flask app. For testing you can basically copy past the JSON dumps from the python code ( html_out ) into the HTML (see below).

Python Code

        import plotly.graph_objects as go
        import plotly
        import numpy as np
        import json
        
        x = np.arange(10)
        
        fig = go.Figure(data=go.Scatter(x=x, y=x**2))
        html_out=json.dumps(fig , cls=plotly.utils.PlotlyJSONEncoder)

HTML

<html>
    <head>
        <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
    </head>
    <style>
      .plotContainer{
        margin: 2px; 
        border: 2px solid black; 
        border-radius: 20px; 
        padding: 10px ;
        overflow: hidden;
        position:relative;
        background:#34e8eb;
        width:-moz-fit-content; 
        width: fit-content; 
      }
    </style>
        
    <body>
        <div id = "rollingPermitContainer" class ="plotContainer">
            <div id="rollingPermitChart" class="chart"></div>
        </div>   
    </body>
        
    <script>

        var rolling_permit_fig = //**Put JSON dump here **;
        Plotly.newPlot ('rollingPermitChart',rolling_permit_fig,{});
    </script>

Answer 1

I found a workaround but it does not fully answer the question. In my question, I want to add an ID to the <div> so that I can access it very accurately. However, if this turns out not to be possible you can access the classes user-select-none svg-container for the outermost div, and main-svg for the main background of the figure. I was able to set the border radius property with

<script>
  var plotSVG = document.getElementsByClassName('main-svg')
  plotSVG[0].style.borderRadius = "20px";
</script>

which was my goal in access in the <div> .

The issue is that on some of my pages I have many Plotly plots. Though I could access them by indexing the getElementsByClassName elements, I feel that this could lead to errors down the road, and it would be better to have the ID of the outer <div> .

How to add ID to outermost <div> tag of plotly chart using plotly JSON dumps (from python app)?

Question

1 answers

solution1
0 2021-11-11 16:41:13

How to add ID to outermost <div> tag of plotly chart using plotly JSON dumps (from python app)?

Question

1 answers

solution1 0 2021-11-11 16:41:13

solution1
0 2021-11-11 16:41:13