apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.32k stars 159 forks source link

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. #574

Open choichangseo opened 10 months ago

choichangseo commented 10 months ago

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>
  );
}
스크린샷 2024-01-31 11 13 40
github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.