Treemap colorScale range begins with 0.85 transparency

[AntoineArt]

Description

Hi, I can't find a way to get the main tile's color to be exactly the color I set, as it seems to be set by default with an opacity of 0.85.

For context I am using React.

Steps to Reproduce

1. Use this chart :

'use client';

import ApexChart from '@/modules/utils/apexcharts';
import { Props } from 'react-apexcharts';
import React from 'react';

const defaultOptions: Props['options'] = {
  legend: {
    show: false,
  },
  chart: {
    type: 'treemap',
    toolbar: {
      show: false,
    },
  },
  grid: {
    padding: {
      top: -10,
    },
  },
};

export const SalesTreemap = (props: any) => {
  const max = Math.max(
    ...props.series[0].data.map((item: any) => {
      return item.y;
    })
  );
  const min = Math.min(
    ...props.series[0].data.map((item: any) => {
      return item.y;
    })
  );
  const options = {
    ...defaultOptions,
    title: {
      text: props.title,
      align: 'left',
      style: {
        fontSize: '12px',
      },
    },
    plotOptions: {
      treemap: {
        enableShades: true,
        shadeIntensity: 0.5,
        reverseNegativeShade: true,
        distributed: false,
        useFillColorAsStroke: false,
        dataLabels: {
          format: 'scale',
        },
        colorScale: {
          ranges: [
            {
              from: min,
              to: max,
              color: '#006fee',
            },
          ],
          inverse: false,
        },
      },
    },
  };

  return (
    typeof window !== 'undefined' && (
      <ApexChart
        options={options}
        series={props.series}
        type='treemap'
        height='100%'
      />
    )
  );
};

2. Run it with a series like :

const series = [
    {
        "data": [
            {
                "x": "Vendeurs",
                "y": 18
            },
            {
                "x": "Service location",
                "y": 2
            },
            {
                "x": "Atelier",
                "y": 4
            },
            {
                "x": "Magasin pièces",
                "y": 4
            },
            {
                "x": "Secrétariat commercial",
                "y": 2
            }
        ]
    }
]

4. Open your developer tools in your browser
5. Select the main tile
6. look at the fill element like here :
   

Expected Behavior

The color range should begin at 100% opacity, not 85%.
When I set a parameter, I expect it to be used exactly as is, not modified, because here it creates a mismatch between the treemap's main color and my other charts'colors.

[brianlagunas]

Please provide a link to a reproduction application. If not, this issue will be closed.

[junedchhipa]

Fixed the original issue. For a quick fix, you can set the opacity in fill options

options = {
  fill: {
     opacity: 1,
   }
}