Conditional cellStyling

[monikadixit]

Hi , I am trying to put different colors on the basis of value. I tried following but having errors. Could you please tell me how I can use conditional cell styling formatting ?

<HeatMap
        xLabels={xLabels}
        yLabels={yLabels}
        xLabelsLocation={"bottom"}
        xLabelsVisibility={xLabelsVisibility}
        xLabelWidth={60}
        data={data}
        squares
        height={45}
        onClick={(x, y) => alert(`Clicked ${x}, ${y}`)}
        **cellStyle={(background, value, min, max, data, x, y) => ({
          if(value '> 53){
        background: "rgba(0, 151, 230, 0.3)",
        fontSize: "11.5px",
        color: "#444"
        }**
        })}
        cellRender={value => value && <div>{value}</div>}
      />

[arunghosh]

You got the syntax wrong

cellStyle = {(background, value, min, max, data, x, y) => {
  if (value > 53) {
    return {
      background: 'rgba(0, 151, 230, 0.3)',
      fontSize: '11.5px',
      color: '#444'
    };
  }
  return {
    // Different style
  };
}}

[monikadixit]

Thank you ! , I solved it little differently cellStyle={(background, value, min, max, data, x, y) => ({ //background:rgba(${(99.990-value)1000000}, ${(value-99.90)30000},0 , 0.7), background: setRGB(value), fontSize: "11.5px", color: "#444" })}

function setRGB(value){ if(value >= 99.99){ returnrgba(0,255,0,0.7)} }