[Bug] Boxplot chart is not working when y-axis type is time

[rtilak-oleti]

Version

5.5.1

Link to Minimal Reproduction

https://codepen.io/Rajtilak/pen/OPLXvpo

Steps to Reproduce

1. Use the configuration below for an ECharts instance.
2. Load the provided dataset.
3. Observe the behavior of the boxplot chart.

{
    "dataZoom": [
        {
            "id": "dataZoomX",
            "type": "slider",
            "yAxisIndex": [
                0
            ],
            "filterMode": "filter",
            "minValueSpan": 5,
            "showDataShadow": true
        }
    ],
    "tooltip": {
        "trigger": "axis",
        "renderMode": "html",
        "backgroundColor": "rgba(0, 0, 0, 0.8)",
        "borderColor": "rgba(0, 0, 0, 1)",
        "borderWidth": 1,
        "appendToBody": true,
        "textStyle": {
            "color": "#fff",
            "fontFamily": "LATO",
            "fontSize": 11
        },
        "padding": 10,
        "extraCssText": "box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3); border-radius: 8px;"
    },
    "grid": {
        "left": "2%",
        "right": "2%",
        "top": "20%",
        "bottom": "25%",
        "containLabel": true
    },
    "legend": {
        "type": "scroll",
        "orient": "horizontal",
        "pageButtonPosition": "end",
        "left": "3.5%",
        "top": "2px",
        "icon": "roundRect",
        "animation": true,
        "data": [
            "desired heating",
            "desired cooling",
            "calculatedParameter_1"
        ]
    },
    "yAxis": {
        "type": "time",
        "name": "Date & Time",
        "nameLocation": "middle",
        "nameGap": 30,
        "nameTextStyle": {
            "fontFamily": "Lato",
            "fontSize": 13,
            "lineHeight": 14,
            "color": "#999999"
        },
        "boundaryGap": false,
        "splitNumber": 5,
        "axisLabel": {
            "formatter": {
                "myear": "{yyyy}",
                "month": "{MMMM}",
                "day": "{MMM} {dd}",
                "hour": "{hh}:{mm} {A}",
                "minute": "{hh}:{mm} {A}"
            }
        },
        "data": [
            "2024-11-26T18:30:00Z",
            "2024-11-28T00:00:00Z"
        ],
        "axisLine": {
            "lineStyle": {
                "color": "#CCCCCC"
            }
        },
        "axisTick": {
            "show": false
        }
    },
    "xAxis": [
        {
            "axisLine": {
                "lineStyle": {
                    "color": "#CCCCCC"
                }
            },
            "position": "left",
            "name": "Values",
            "nameLocation": "middle",
            "nameGap": 40,
            "nameTextStyle": {
                "fontFamily": "Lato",
                "fontSize": 13,
                "lineHeight": 14,
                "color": "#999999"
            },
            "axisLabel": {}
        }
    ],
    "series": [
        {
            "name": "desired heating",
            "unit": "°C",
            "defaultNameForExports": "desired heating",
            "type": "boxplot",
            "symbol": "none",
            "itemStyle": {
                "borderColor": "#897A5F"
            },
            "data": [
                [
                    "2024-11-26T18:30:00Z",
                    11,
                    13.5,
                    12.5,
                    11.5,
                    14
                ],
                [
                    "2024-11-28T00:00:00Z",
                    10.5,
                    13.5,
                    12.5,
                    11,
                    14
                ]
            ],
            "yAxisIndex": 0
        },
        {
            "name": "desired cooling",
            "unit": "°C",
            "defaultNameForExports": "desired cooling",
            "type": "boxplot",
            "symbol": "none",
            "itemStyle": {
                "borderColor": "#8FDB5A"
            },
            "data": [
                [
                    "2024-11-26T18:30:00Z",
                    11,
                    13.5,
                    12.5,
                    11.5,
                    14
                ],
                [
                    "2024-11-28T00:00:00Z",
                    11,
                    14,
                    13,
                    11.5,
                    14.5
                ]
            ],
            "yAxisIndex": 0
        },
        {
            "name": "calculatedParameter_1",
            "defaultNameForExports": "calculatedParameter_1",
            "type": "boxplot",
            "symbol": "none",
            "itemStyle": {
                "borderColor": "#FD8013"
            },
            "data": [
                [
                    "2024-11-26T18:30:00Z",
                    22,
                    27,
                    25,
                    23,
                    28
                ],
                [
                    "2024-11-28T00:00:00Z",
                    21.5,
                    27.5,
                    25.5,
                    22.5,
                    28.5
                ]
            ],
            "yAxisIndex": 0
        }
    ]
}

Current Behavior

1. The chart fails to render.
2. The y-axis and x-axis labels do not appear as expected.

Expected Behavior

The boxplot chart should render correctly with the y-axis representing time-based data. Each series of boxplot values should align with the specified time values on the y-axis.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

• I have ensured the time values are in JavaScript timestamp format.
• Switching the yAxis.type to 'value' resolves the rendering issue, but it does not meet the requirements of my use case.

[helgasoft]

Barplots, like bars, do not function well with axes with continuous data, like time or value. Because they have width which takes space. So yAxis type: 'time' won't work for you, but type: 'category' will - Demo.