When using rangeArea, the line and rangeArea properties are not applied to the series. Even if you add the stroke property, the rangeArea covers the line.

[choichangseo]

When using rangeArea, the line and rangeArea properties are not applied to the series. Even if you add the stroke property, the rangeArea covers the line.

export default function ClusterChart() {
  const options = {
    chart: {
      height: 350,
    },
  };

  const series2 = [
    {
      name: "Cluster 2 Medium",
      type: "line",
      data: [
        { x: 6, y: 9 },
        { x: 7, y: 1 },
        { x: 8, y: 4 },
      ],
      stroke: {
        curve: "smooth", // 또는 다른 옵션
        colors: ["#FF4560"], // 원하는 색상으로 설정
      },
    },
    {
      name: "Cluster 2",
      type: "rangeArea",
      data: [
        { x: 6, y: [8, 10] },
        { x: 7, y: [0, 2] },
        { x: 8, y: [2, 6] },
      ],
      fill: {
        opacity: 0.1, // 투명도 조절
      },
      stroke: {
        curve: "smooth", // 또는 다른 옵션
        colors: ["#FF4560"], // 원하는 색상으로 설정
      },
    },
  ];
  return (
    <div>
      <ApexChart
        height={500}
        options={options}
        series={series2}
        type="rangeArea"
      />

    </div>
  );
}