折线图chart.js上有两个不同的x轴标签

我正在尝试使用chart.js在React中创建一个天气图表组件。我想要两个不同的x轴，温度在图表上方，时间在图表下方。数据是正确的，我只是想在x轴的顶部和底部使用两个不同的标签。我该怎么做？

import React from "react";
import { Line } from 'react-chartjs-2';

class WeatherOverview extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            chartData: {
                labels: ['15:00', '18:00', '21:00', '00:00', '03:00', '06:00', '09:00', '12:00'], //time
                datasets: [{
                    data: [18, 19, 18, 16, 15, 15, 16, 17, 18] //temp
                }],
            }
        }
    }
    render(){
        return (
            <div className="chart">
                <Line
                    data={this.state.chartData}
                    options={{
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    drawOnChartArea: false
                                },
                                ticks: {
                                    suggestedMin: 13, // lowest from data minus 2/3
                                    display: false 
                                }
                            }],
                            xAxes: [
                                {
                                    gridLines: {
                                        drawOnChartArea: false
                                    },
                                },
                                { position: 'top' },
                            ]
                        }
                    }}
                />
            </div>
        )
    }
}

export default WeatherOverview;