Apache echarts parallel chart parallel axis emphasis

Question

I am using echarts to create a parallel chart. I am trying to create an emphasis on 2 elements at the same time but I feel like one of the element I am trying to create the emphasis on does not support it. Are there any workarounds where I would be able to highlight the categories when hovering a line in my sample code ?

Thanks

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
  parallelAxis: [
    {
      dim: 0,
      name: 'Animal',
      type: 'category',
      data: [
        {
          value: 'Dog',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        },
        {
          value: 'Cat',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        },
        {
          value: 'Mouse',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        }
      ]
    },
    {
      dim: 1,
      name: 'Country',
      type: 'category',
      data: [
        {
          value: 'Fr',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        },
        {
          value: 'Ch',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        },
        {
          value: 'US',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        }
      ]
    },
    {
      dim: 2,
      name: 'Age',
      type: 'category',
      data: [
        {
          value: '<5',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        },
        {
          value: '5-15',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        },
        {
          value: '>15',
          textStyle: {
            fontWeight: 'bolder',
            borderRadius: 100,
            width: 25,
            height: 25,
            padding: 5,
            align: 'center',
            color: 'white',
            backgroundColor: 'red'
          }
        }
      ]
    }
  ],
  series: [
    {
      type: 'parallel',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [[0, 1, 2]]
    },
    {
      type: 'parallel',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [[1, 1, 1]]
    }
  ]
};


if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic Parallel - Apache ECharts Demo</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>