How to embede Apache Superset chart into React app

Question

I want to embed my chart from Apache Superset into my React.js App. So far I know there is possibility to use like this:

<iframe
        id="myIFRAME"
        width="1600"
        height="1200"
        seamless
        frameBorder="10"
        scrolling="no"
        src="http://localhost:8080/r/3"
      >
</iframe>

It works fine but I want to use only a chart with filter options without all the superset dashbord pane:

I was trying to use https://www.npmjs.com/package/@superset-ui/core but there is no good documentation how to use it and it require to downgrade react version to 16, while I think in my project will be better newer version.

Currently I am trying to manipulate things inside iframe by catching things by

var iframe = document.getElementById("myIFRAME");
  var elmnt = iframe.contentWindow.document.getElementsByClassName(
    "dashboard-content css-185d7vi"
  );
   elmnt.style.display = "none";

But i think it's not a good way to do this and Im getting errors with CORS and Consider adding an error boundary to your tree to customize error handling behavior.

Answer 1

There is an option to add to iframe query attribute standalone=true..

<iframe
        id="myIFRAME"
        width="1600"
        height="1200"
        seamless
        frameBorder="10"
        scrolling="no"
        src="http://localhost:8080/superset/dashboard/world_health/?standalone=true"
      ></iframe>

Answer 2

I think this is helpful for your question.

https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#customizing-dashboard

<iframe
    width="1600"
    height="1600"
    seamless
    frameBorder="0"
    scrolling="yes"
    src="http://127.0.0.1:8088/superset/dashboard/16?standalone=2"
    >
</iframe>

Don't get the URL from 'Copy dashboard URL' in superset. Instead of that you can get the dashboard URL from the browser link address. At the end of the URL simply add '?standalone=2'