Radar not displaying correctly

Using the below does not produce a valid radar chart, see image beneath code, We have tried everything for last couple of days!

Is there something we are missing?

Also we all other charts are working fine so it isn’t a problem with the setup.

import React from 'react';
import PropTypes from 'prop-types';
import createPlotlyComponent from 'react-plotly.js/factory';
import _Plot from 'plotly.js/dist/plotly-cartesian';

const Plot = createPlotlyComponent(_Plot);

const RadarChart = ({ data, layout }) => (
  <Plot
    data={[
      {
        type: 'scatterpolar',
        r: [39, 28, 8, 7, 28, 39],
        theta: ['A', 'B', 'C', 'D', 'E', 'A'],
        fill: 'toself',
        name: 'Group A',
      },
      {
        type: 'scatterpolar',
        r: [1.5, 10, 39, 31, 15, 1.5],
        theta: ['A', 'B', 'C', 'D', 'E', 'A'],
        fill: 'toself',
        name: 'Group B',
      },
    ]}
    layout={layout}
  />
);

export const radarChartProps = {
  data: PropTypes.arrayOf(PropTypes.array).isRequired,
  layout: PropTypes.object,
};

RadarChart.defaultProps = {
  layout: {
    polar: {
      radialaxis: {
        visible: true,
        range: [0, 50],
      },
    },
    showlegend: false,
  },
};

RadarChart.propTypes = radarChartProps;

export default RadarChart;

[mooncitizen]

@nicolaskruchten Hi, thanks for your support here but we actually found the issue we used the import below which got _Plot from plotly.js/dist/plotly-cartesian. When we rebuilt using plotly.js (see code example below) it resolved the issue. However nothing was wrong our end the documentation or code in here “broke” the radar. I leave a code sample incase anyone else in the future runs into this.

codepen : https://codepen.io/mooncitizen/pen/mavYyJ

import PropTypes from 'prop-types';
import createPlotlyComponent from 'react-plotly.js/factory';
import _Plot from 'plotly.js/dist/plotly-cartesian';

import Plotly from 'plotly.js';

const Plot = createPlotlyComponent(Plotly);

const RadarChart = ({ data, layout }) => <Plot data={data} layout={layout} />;

export const radarChartProps = {
  data: PropTypes.arrayOf(PropTypes.array).isRequired,
  layout: PropTypes.object,
};

RadarChart.defaultProps = {
  layout: {
    polar: {
      radialaxis: {
        visible: false,
        range: [0, 50],
      },
    },
    showlegend: false,
  },
};

RadarChart.propTypes = radarChartProps;

export default RadarChart;

[nicolaskruchten]

OK then, that explains it!