Black Lives Matter. Please consider donating to Black Girls Code today.

Error in implementing donut chart in bootstrap modal

I am trying to implement donut chart in bootstrap modal and it is throwing this error.

plotly-latest.min.js:9 Error: Invalid value for attribute d=“MNaN,NaNa60,60 0 0 0 NaN,NaNa60,60 0 0 0 NaN,NaNZMNaN,NaNa100,100 0 0 1 NaN,NaNa100,100 0 0 1 NaN,NaNZ”

The script works when it is implemented in html with div but when I want the donut chart in modal, it is throwing this error, which i don’t understand what it is trying to say.

Could you help me what is wrong?

Can you help us out a little bit more?

Could you provide a reproducible example?

Could you provide a link to that boostrap modal your talking about?

Above is the example what I am trying to do. It perfectly works in code pen. Please click “edit on” to see the modal. Modal is not loading in code pen preview.

My script has two javascripts to load two graphs in a div row as it is shown in example. And the first graph is shown but second graph is not called with following error message: Error: Invalid value for attribute d=“MNaN,NaNa60,60 0 0 0 NaN,NaNa60,60 0 0 0 NaN,NaNZMNaN,NaNa100,100 0 0 1 NaN,NaNa100,100 0 0 1 NaN,NaNZ”