How to change size of react-apexchart's radar chart width and height?

Question

I am working on a project that shows some data on radar charts. But I can not figure out the size of radar chart. Currently, I am using react-apexcharts and its radar chart.

import { ApexOptions } from "apexcharts";
import React from "react";
import Chart from "react-apexcharts";

type RadarChartProps = {
  series: ApexOptions["series"];
  categories: string[];
};

const RadarChart: React.FC<RadarChartProps> = (props) => {
  const options: ApexOptions = {
    chart: {
      height: "100%",
      width: "100%",
      type: "radar",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: true,
      },
      sparkline: {
        enabled: false,
      },
    },

    xaxis: {
      categories: props.categories,
    },
    dataLabels: {
      enabled: false,
    },
    grid: {
      padding: {
        left: 0,
        right: 0,
      },
    },

    plotOptions: {
      radar: {
        size: 140,
        polygons: {
          fill: {
            colors: ["#f8f8f8", "#fff"],
          },
        },
      },
    },
    markers: {
      size: 4,
      colors: ["#0000FF"], // Marker color for each series
      strokeWidth: 0,
    },
    tooltip: {
      y: {
        formatter(val: number, _opts?: any): string {
          return `${val}`;
        },
      },
    },
    legend: {
      show: true,
      position: "top",
      horizontalAlign: "right",
      fontSize: "14px",
    },
  };
  return <Chart options={options} series={props.series} type="radar" />;
};

export default RadarChart;

This is my code for the question above with the options.

this is an image of my code result. I need to change height and width higher than current size. but i did not find any answers about it from stackoverflow or github issues of react-apexcharts. If you faced into this issue can you give me solutions?

I want to change the size of my radar chart.

Answer 1

The issue lies within the plotOptions property. You're setting the size, which ultimately restricts the graph from expanding inside the container. You need to remove the size property inside the plotOptions. Below is an example

plotOptions: {
    radar: {
        polygons: {
            fill: {
                colors: ["#f8f8f8", "#fff"],
            },
        },
    },
},