I am using Apache Echarts 5.3.2 and I am developing a Gantt-like custom chart. Each "event" is an item inside a single serie, and I want to apply some borders to the each item independently. For that I use itemStyle.

The issue is that, if I apply a border like in Event A, the label dissappears. However if I set something like shadow (Event B), it doesn't.

If I hover, however, the label does appear. Am I doing something wrong in the renderItem method?

Here is the example code. You can paste it direclty in Apache Echarts Examples to check it.

const _eventHeight = 25; // px
const _eventSpace = 40; // px
const _eventWindow = 8; // px
const _verticalToolingSpace = 30; // px estimation of the space required to show the x axis and the dataZoom bar.
const _enableShapeChange = false;

const HistoricalChartDimensions = {
    Id: 0,
    StartDate: 1,
    EndDate: 2,
    Label: 3,
    Color: 4,
    AdditionalParams: 5,
    VisibleStartDate: 6,
    VisibleEndDate: 7,
    IsEdited: 8,
    IsCreated: 9,
    HasError: 10,
}

const clipRectByRect = (params, rect) => {
    return echarts.graphic.clipRectByRect(rect, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height,
    });
};

const renderItem = (params, api) => {
    const categoryIndex = api.value(HistoricalChartDimensions.Id);
    const dateStartNumber = api.value(HistoricalChartDimensions.VisibleStartDate);
    const dateEndNumber = api.value(HistoricalChartDimensions.VisibleEndDate);
    const color = api.value(HistoricalChartDimensions.Color);
    const startCoords = api.coord([dateStartNumber, categoryIndex]);
    const endCoords = api.coord([dateEndNumber, categoryIndex]);
    const eventLength = endCoords[0] - startCoords[0];
    // Get the heigth corresponds to length 1 on y axis.
    let x = startCoords[0];
    const y = endCoords[1];

    const eventLabel = api.value(HistoricalChartDimensions.Label) + '';
    const eventLabelWidth = echarts.format.getTextRect(eventLabel).width;
    const text = eventLength > eventLabelWidth + 40 && x + eventLength >= 80 ? eventLabel : '';

    let shapeType = 'rect';
    let shape = clipRectByRect(params, {
      x,
      y,
      width: eventLength,
      height: _eventHeight,
    });

    const rectText = clipRectByRect(params, {
      x,
      y,
      width: eventLength,
      height: _eventHeight,
    });

    return {
      type: 'group',
      children: [
        {
          type: shapeType,
          ignore: !shape,
          shape,
          style: api.style({
            fill: color,
          }),
        },
        {
          type: 'rect',
          ignore: !rectText,
          shape: rectText,
          style: api.style({
            fill: 'transparent',
            stroke: 'transparent',
            text,
            textFill: '#000',
          }),
        },
      ],
    };
  };

let data = [
     {
       value: [
        "6c56aa21-58f9-407d-9298-c10c84715eb0",
        "1800-01-01T00:00:00.000Z",
        "2200-01-01T00:00:00.000Z",
        "Event A",
        "#F9E79F",
        undefined,
        "2019-03-27T23:00:00.000Z",
        "2022-03-27T22:00:00.000Z"
      ],
      itemStyle: {
        borderColor: '#cc2e29'
      }
    },
    {
      value: [
        "56775c76-b20f-470d-a8db-03b2682d7af0",
        "1800-01-01T00:00:00.000Z",
        "2022-03-18T00:00:00.000Z",
        "Event B",
        "#F9E79F",
        undefined,
        "2019-03-27T23:00:00.000Z",
        "2022-03-18T00:00:00.000Z"
      ],
      itemStyle: {
        shadowOffsetX: 3,
        shadowOffsetY: 3,
        shadowBlur: 3,
        shadowColor: '#cc2e29'
      }
    }
];

updateOptions();

function updateOptions () {

    option = {
        
       
        "xAxis": [
            {
                "show": true,
                "position": "top",
                "nameLocation": "end",
                "type": "time",
                "min": "2019-03-27T23:00:00.000Z",
                "max": "2022-03-27T22:00:00.000Z",
                "axisLabel": {
                    "fontStyle": "normal",
                    "fontSize": 9
                },
                "axisLine": {
                    "show": true
                },
                "axisTick": {
                    "show": true
                },
                "splitLine": {
                    "show": true
                },
                "boundaryGap": false
            },
            {
                "show": true,
                "position": "bottom",
                "nameLocation": "end",
                "type": "time",
                "min": "2019-03-27T23:00:00.000Z",
                "max": "2022-03-27T22:00:00.000Z",
                "axisLabel": {
                    "fontStyle": "normal",
                    "fontSize": 9,
                    "show": false
                },
                "axisLine": {
                    "show": true
                },
                "axisTick": {
                    "show": false
                },
                "splitLine": {
                    "show": false
                },
                "boundaryGap": false
            }
        ],
        "yAxis": [
            {
                "show": true,
                "nameLocation": "end",
                "type": "category",
                "axisLabel": {
                    "fontStyle": "normal",
                    "fontSize": 9,
                    "show": false
                },
                "axisLine": {
                    "show": true
                },
                "axisTick": {
                    "show": false
                },
                "splitLine": {
                    "show": false
                }
            },
            {
                "show": true,
                "nameLocation": "end",
                "type": "category",
                "axisLabel": {
                    "fontStyle": "normal",
                    "fontSize": 9,
                    "show": false
                },
                "axisLine": {
                    "show": true
                },
                "axisTick": {
                    "show": false
                },
                "splitLine": {
                    "show": false
                }
            }
        ],
        "series": [
            {
                "type": "custom",
                "xAxisIndex": 0,
                "yAxisIndex": 0,
                "labelLayout": {
                    "hideOverlap": true
                },
                "encode": {
                    "x": [
                        1,
                        2
                    ],
                    "y": 0
                },
                "renderItem": renderItem,
                "data": data,
                "dimensions": [
                    0,
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    9,
                    8,
                    10
                ]
            }
        ]
    }
}

Thanks for the help!