Plotly Restyle меняет тип диаграммы

Question

Используя сюжетную реакцию, я бы хотел менять цвет гистограммы всякий раз, когда кто-то наводит курсор на нее. Хотя я могу заставить его работать на коде, я наткнулся на ошибку / ошибку (свою собственную?), Когда делал это локально.

Я следовал примеру, взятому из: https://plot.ly/javascript/plotlyjs-events/#hover -event

При наведении курсора на один из столбцов подплощадки он сразу же меняет тип диаграммы на «scatter + линия'. Есть идеи, что мне здесь не хватает?

import React from 'react';
import Plot from 'react-plotly.js';
import {CSBITheme} from '../util/Constants.js'
import * as Plotly from "plotly.js/src/plot_api/plot_api";

export default function WorldwideServicelevelChart(props) {
    if (props.data === null) {
        return null
    }

    const base_val = 0.0;

    let traces = {
        'PHONE': {
            x: [],
            y: [],
            colors: [],
            properties: {xaxis: 'x1'},
        },
        'CHAT': {
            x: [],
            y: [],
            colors: [],
            properties: {xaxis: 'x2'}
        },
        'EMAIL': {
            x: [],
            y: [],
            colors: [],
            properties: {xaxis: 'x3'}
        },
        'ANOTHER': {
            x: [],
            y: [],
            colors: [],
            properties: {xaxis: 'x4'}
        },
    };

    props.data['Records'].map(country => {
        traces['PHONE'].x.push(country['PHONE_SL_HEAD'] - base_val);
        traces['CHAT'].x.push(country['CHAT_SL_HEAD'] - base_val);
        traces['EMAIL'].x.push(country['EMAIL_SL_HEAD'] - base_val);
        if (country['ANOTHER_SL_HEAD'] !== null) {
            traces['ANOTHER'].x.push(country['ANOTHER_SL_HEAD'] - base_val);
        }

        for (const trace in traces) {
            traces[trace].y.push(country['COUNTRY'])
        }
        ;

        if (country['PHONE_SL_HEAD'] < 0.8) {
            traces['PHONE'].colors.push(CSBITheme.danger)
        } else if (country['REGION'] === 'Europe') {
            traces['PHONE'].colors.push('#2B3C4E')
        } else if (country['REGION'] === 'Americas') {
            traces['PHONE'].colors.push('#1798DD')
        } else {
            traces['PHONE'].colors.push('#13699F')
        }

        if (country['CHAT_SL_HEAD'] < 0.8) {
            traces['CHAT'].colors.push(CSBITheme.danger)
        } else if (country['REGION'] === 'Europe') {
            traces['CHAT'].colors.push('#2B3C4E')
        } else if (country['REGION'] === 'Americas') {
            traces['CHAT'].colors.push('#1798DD')
        } else {
            traces['CHAT'].colors.push('#13699F')
        }

        if (country['EMAIL_SL_HEAD'] < 0.8) {
            traces['EMAIL'].colors.push(CSBITheme.danger)
        } else if (country['REGION'] === 'Europe') {
            traces['EMAIL'].colors.push('#2B3C4E')
        } else if (country['REGION'] === 'Americas') {
            traces['EMAIL'].colors.push('#1798DD')
        } else {
            traces['EMAIL'].colors.push('#13699F')
        }

        if (country['ANOTHER_SL_HEAD'] < 0.8 && country['ANOTHER_SL_HEAD'] !== null) {
            traces['ANOTHER'].colors.push(CSBITheme.danger)
        } else if (country['REGION'] === 'Europe') {
            traces['ANOTHER'].colors.push('#2B3C4E')
        } else if (country['REGION'] === 'Americas') {
            traces['ANOTHER'].colors.push('#1798DD')
        } else {
            traces['ANOTHER'].colors.push('#13699F')
        }
    });

    let xAxisProps = {
        range: [0.0, 1.00],
        side: 'top',
        tickformat: ',.0%',
        linecolor: '#FFFFFF',
        linewidth: 1,
        mirror: true,
        gridcolor: '#FFFFFF',
        zeroline: false,
    };

    var layout = {
        margin: {l: 80, r: 60, t: 60, b: 20},
        plot_bgcolor: "#E5ECF5",
        showlegend: false,
        barmode: 'stack',
        grid: {
            rows: 1,
            columns: 4,
            xgap: 0.1,
            subplots: [['xy', 'x2y', 'x3y', 'x4y']],
        },
        xaxis: {
            ...xAxisProps,
        },
        xaxis2: {
            ...xAxisProps,
        },
        xaxis3: {
            ...xAxisProps,
        },
        xaxis4: {
            ...xAxisProps,
        },
        yaxis: {
            showgrid: true,
            gridcolor: '#FFFFFF',
            ticklen: 10,
            tickcolor: '#FFFFFF'
        },
        annotations: [
            {
                text: "Phone",
                font: {
                    size: 16,
                    color: '#444444',
                },
                showarrow: false,
                captureevents: true,
                align: 'center',
                x: 0.095,
                y: 1.1,
                xref: 'paper',
                yref: 'paper',
            },
            {
                text: "Chat",
                font: {
                    size: 16,
                    color: '#444444',
                },
                showarrow: false,
                captureevents: true,
                align: 'center',
                x: 0.365,
                y: 1.1,
                xref: 'paper',
                yref: 'paper',
            },
            {
                text: "Email",
                font: {
                    size: 16,
                    color: '#444444',
                },
                showarrow: false,
                captureevents: true,
                align: 'center',
                x: 0.62,
                y: 1.1,
                xref: 'paper',
                yref: 'paper',
            },
            {
                text: "another",
                font: {
                    size: 16,
                    color: '#444444',
                },
                showarrow: false,
                captureevents: true,
                align: 'center',
                x: 0.9125,
                y: 1.1,
                xref: 'paper',
                yref: 'paper',
            }],
    };

    let data = [];
    for (const trace in traces) {
        data.push({
            x: traces[trace].x,
            y: traces[trace].y,
            text: traces[trace].x.map(num => (num * 100).toFixed(1) + "%"),
            textfont: {
                color: ('rgba(255,255,255, 1)')
            },
            textposition: 'inside',
            insidetextanchor: 'start',
            hovertext: false,
            hoverinfo: 'y',
            marker: {
                color: traces[trace].colors,
            },
            type: 'bar',
            xaxis: traces[trace]['properties']['xaxis'],
            orientation: 'h',
            base: base_val,
            name: trace,
            width: 0.66,
        })
    }

    function handleClickAnnotation(event) {
        props.onAnnotationclick(event['annotation']['text'])
    }

    function handleHover(data) {
        let pn = '',
            tn = '',
            colors = [];
        for (let i = 0; i < data.points.length; i++) {
            pn = data.points[i].pointNumber;
            tn = data.points[i].curveNumber;
            colors = data.points[i].data.marker.color;
        }

        colors[pn] = '#C54C82';
        let update = {'marker': {color: '#C54C82'}};
        Plotly.restyle('mainPlot', update, [tn]);
    }

    return (
        <div style={{height: '100%'}}>
            <Plot
                divId={'mainPlot'}
                data={data}
                layout={layout}
                useResizeHandler={true}
                config={{'displayModeBar': false}}
                style={{width: "100%", height: "100%"}}
                onClick={props.onCountryClick}
                onClickAnnotation={handleClickAnnotation}
                onHover={handleHover}
            />
        </div>
    );
}