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>
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>.