How to plot using Plotly.js

[gganapat]

This may be a simple thing I'm missing but when I try to reproduce a plotly plot from notebook, I get Runtime DOM not defined error. I installed Plotly using npm i --save plotly.js-dist-min

Thanks!

import Plotly from 'plotly.js-dist-min'
   
  var data1 = traces;

  var layout = {
    title: 'Deaths at different risks by country',
    annotations: [{
    text: pickConditions,
      font: {
      size: 13,
      color: 'rgb(116, 101, 130)',
    },
    showarrow: false,
    align: 'center',
    x: 0.5,
    y: 1.1,
    xref: 'paper',
    yref: 'paper',
  }],
    autosize: true,
    margin:{
      l:100,
      b:100,
    },
    width: 800,
    height: 500,
    xaxis: {
        title : "Year",
        titlefont:{
          size:16
        },
        tickfont: {
        size: 10,
        color: 'rgb(107, 107, 107)'
      }
    },
    yaxis: {
      title: 'Number of deaths',
      titlefont: {
        size: 16,
        color: 'rgb(107, 107, 107)'
      },
      tickfont: {
        size: 10,
        color: 'rgb(107, 107, 107)'
      }
    },
    
  };

  const div = DOM.element('div');
  Plotly.newPlot(div, data, layout, {width: width});
  

[mbostock]

Looks like you’re trying to use DOM.element which doesn’t exist in Framework.

Replace DOM.element with document.createElement and make sure the DIV is added to the DOM. Otherwise use document.querySelector to select an element that already exists in the DOM.

[gganapat]

Thank you! Worked beautifully!
gani -