Yes the example can be changed to simpler:

return {
  ...
  style: {
    fill: api.visual('color')
  }
}

Thanks @pissang
I let you close this, as I don't know if the documentation / examples should be updated

@pissang I got a similar use case with custom render using api.style() . It seems that api.style() does more than just setting the styles.

const customRender = (params, api) => {
    const start = api.coord([api.value(0), 1]);
    const style = api.style();

    return {
        type: 'rect',
        shape: {
            x: start[0],
            y: start[1],
            width: params.coordSys.width / values.length,
            height: params.coordSys.height
        },
        style: style
    };
};

When I print out the result of api.style() , it's more than just styling. There are setting of the Y value, right?

{
    "fill": "white",
    "stroke": "black",
    "textPosition": "inside",
    "textDistance": 5,
    "textFill": "black",
    "fontStyle": "normal",
    "fontWeight": "normal",
    "fontSize": 12,
    "fontFamily": "sans-serif",
    "text": "YEF",
    "legacy": true
}

Yes the example can be changed to simpler:

return {
  ...
  style: {
    fill: api.visual('color')
  }
}

What should be used instead of api.styleEmphasis()?