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.
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"],
},
},
},
},