How to use different colors in Apex charts with a condition?

Question

I am using an Apexcharts treemap chart and want to apply different colors.

If type the data is of type 'a' I want it in one color and if it's of type 'b' I want another color.

My data:

    const TreeData = [
          {
            data: [
              {
                x: 'Product 1',
                y: 218,
                type:'a'
              },
              {
                x: 'Product 2',
                y: 149,
                type:'b'
              }]
    

I've tried something like this:

    colors: [function({ value, seriesIndex, w }) {
        if (value < 55) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }, function({ value, seriesIndex, w }) {
        if (value < 111) {
            return '#7E36AF'
        } else {
            return '#D9534F'
        }
      }]
    

But I'm not able to get type value in the above function.

How do I use different colors?

Answer 1

To use different colors for each cell in a treemap, you can apply fillColor in the series itself.

series: [
  {
    data: [
      {
        x: 'New Delhi',
        y: 218,
        fillColor: '#3396F7'
      },
      {
        x: 'Kolkata',
        y: 149,
        fillColor: '#EC4498'
      },
      {
        x: 'Mumbai',
        y: 184,
        fillColor: '#61CF35'
      }
    ]
  }
]