When the type is boxPlot, with outliers does not work properly

[OneHyun]

I am developing in a React environment and using React-ApexChart.

I want to apply BoxPlot with Outliers, and it works fine when the type is 'Bar'. However, I found that the official documentation's implementation does not work when the type is 'BoxPlot'.

Is there a way to resolve this issue?

 var options = {
          series: [
          {
            name: 'box',
            type: 'boxPlot',
            data: [
              {
                x: 'Alice',
                y: [54, 66, 69, 75, 88],
                goals: [
                  {
                    value: 32,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                ],
              },
              {
                x: 'Bob',
                y: [43, 65, 69, 76, 81],
                goals: [
                  {
                    value: 35,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                  {
                    value: 95,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                ],
              },
              {
                x: 'Charlie',
                y: [31, 39, 45, 51, 59],
                goals: [
                  {
                    value: 64,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                  {
                    value: 75,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                ],
              },
              {
                x: 'David',
                y: [39, 46, 55, 65, 71],
                goals: [
                  {
                    value: 27,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                  {
                    value: 77,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                ],
              },
              {
                x: 'Ahmed',
                y: [29, 31, 35, 39, 44],
                goals: [
                  {
                    value: 10,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                  {
                    value: 56,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                  {
                    value: 62,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                  {
                    value: 98,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  },
                ],
              },
            ],
          },
        ],
          chart: {
          type: 'boxPlot',
          height: 350,
        },
        colors: ['#008FFB', '#FEB019'],
        title: {
          text: 'BoxPlot chart with outliers',
          align: 'left',
        },
        xaxis: {
          type: 'category',
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

[junedchhipa]

which version of apexcharts are you using?
Please try the latest version 4.4.0 and report back.

[OneHyun]

Thank you for your help.

I was using react-apexchart version 1.4.1, and after upgrading it to version 1.7.0
I confirmed that it works properly. I sincerely appreciate your help once again.

I also feel sorry for my ignorance in initially downloading an outdated version during the project setup

[OneHyun]

Would it be okay if I ask you two questions?

1. Is it possible to assign different colors to the upper and lower values of each series separately?

2. Is there a way to separately apply a border to the Outlier in addition to the stroke?

[OneHyun]

The chart shape I am aiming for is as follows

[OneHyun]

We realized that we could create an additional value for the outline of the goal based on that, and we have completed the modification.

{
                x: 'Ahmed',
                y: [29, 31, 35, 39, 44],
                goals: [
                  {
                    value: 10,
                    strokeWidth: 0,
                    strokeHeight: 13,
                    strokeLineCap: 'round',
                    strokeColor: '#000000',
                  },
                  {
                    value: 10,
                    strokeWidth: 0,
                    strokeHeight: 9,
                    strokeLineCap: 'round',
                    strokeColor: '#FEB019',
                  }]
}