仅更改一个StackedBar的backgroundColor-ChartJS

Question

我正在使用react-chartjs-2来显示一些基于时间的信息，并且我需要更改当前时间瞬间（背景是当前日期，当前星期或当前月份）的背景颜色。

以下是我要实现的目标的一个示例：

我浏览了所有文档，但没有找到每个StackedBar的与后台索引相关的函数，类似于Tooltip custom函数。

由于Chart.js在canvas上有效，因此无法使用香草JS。我该怎么办？

Chart.js

import React from 'react';
import { Bar } from 'react-chartjs-2';

class Chart extends React.Component {

    createChartArray(visits) {
        const semi_data = visits.map((el) =>
            [el[0].length, el[1].length, el[2].length, el[3].length]
        );
        const data = semi_data[0].map((col, i) =>
            semi_data.map(row => row[i])
        );
        const maxSum = this.getMaximumValue(semi_data);
        const max = (Math.ceil(maxSum * 0.13)) * 10;

        return { visits: data, max: max, stepSize: (max / 4) };
    }

    getMaximumValue(matrix) {
        const sums = matrix.map(el => el.reduce((a, b) => a + b, 0));
        const max = sums.reduce(function (a, b) { return Math.max(a, b); });

        return max;
    }

    getChartdata() {
        const dataPayload = this.props.visits ?
            this.createChartArray(this.props.visits) :
            { visits: [[], [], [], []], max: 20, stepSize: 5 };
        const visits = dataPayload.visits;


        let data = {}
        if (this.props.visits) {
            data = {
                labels: this.props.labels,

                datasets: [
                    {
                        label: 'P',
                        backgroundColor: 'rgba(249,207,143,1)',
                        hoverBackgroundColor: 'rgba(249,207,143,0.4)',
                        data: visits[0] ? visits[0] : []
                    },
                    {
                        label: 'R',
                        backgroundColor: 'rgba(153,223,255,1)',
                        hoverBackgroundColor: 'rgba(153,223,255,0.4)',
                        data: visits[1] ? visits[1] : []
                    },
                    {
                        label: 'D',
                        backgroundColor: 'rgba(173,241,193,1)',
                        hoverBackgroundColor: 'rgba(173,241,193,0.4)',
                        data: visits[2] ? visits[2] : []
                    },
                    {
                        label: 'C',
                        backgroundColor: 'rgba(252,175,162,1)',
                        hoverBackgroundColor: 'rgba(252,175,162,0.4)',
                        data: visits[3] ? visits[3] : []
                    }
                ]
            }
        }
        return { data: data };
    }

    render() {
        const datas = this.getChartdata();
        const datum = datas.data;

        console.log(this.state);
        return (
            <Bar
                ref="chart"
                data={datum}
                width={856}
                height={340}
                options={{
                    responsive: false,
                    legend: {
                        display: false,
                    },
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{
                            stacked: true,
                            gridLines: {
                                display: false,
                                drawBorder: false
                            }
                        }],
                        yAxes: [{
                            display: true,
                            stacked: true,
                            ticks: {
                                beginAtZero: true,
                                max: datas.options.max,
                                stepSize: datas.options.stepSize
                            }
                        }]
                    },
                    tooltips: {
                        enabled: true,
                        mode: "x",
                        intersect: true,
                        caretSize: 0,
                        cornerRadius: 3,
                        displayColors: false,
                        backgroundColor: '#4B4B4B',
                        titleFontSize: 14,
                        bodyFontSize: 12,
                        bodyFontColor: '#FDFDFD',
                        bodySpacing: 5,
                        xPadding: 10,
                        yPadding: 10
                    }
                }}
                redraw
            />
        );
    }
}

export default Chart;