Announcing Dash Bio 1.0.0 ๐ŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

Horizontal bar graph freezes the app

I have the following problem, as you can see in the image, I have a graph of an order book that is constantly being updated, in the app through a stream

I just added the option to be able to change the graph to be able to see it accumulated or normal, for the Normal case I use a bar graph, the problem is that when using this type of graph the app becomes very slow which makes me strange since I also have a volume graph that is the same type of bars and that does not slow me down. app the only difference is that the order book has the property orientation (h) and autorange (reversed) I donโ€™t know if Iโ€™m forgetting to add something to prevent the app from slowing down when using the bar graph or if the graph does not allow updates constants, I leave you some of the code that I use, the first part is to plot the graph

plot() {
        return new Promise(resolve => {
            this.xaxi = this.kl.getXaxi()
            this.updateRangeX()

            Plotly.update(this.kl.layer, {}, {
            [`xaxis${this.xaxi}`]: {
                visible: false,
                fixedrange: true,
                autorange: 'reversed',
                range: this.range.x,
                domain: [0.8, 1]
            }})

            Plotly.addTraces(this.kl.layer,
            [{
                id: this.id,
                name: 'asks',
                x: this.kl.depth.asks.acum,
                y: this.kl.depth.asks.y,
                type: 'scatter',
                fill: 'tozerox',
                mode: 'lines',
                hoverinfo: 'skip',
                xaxis: `x${this.xaxi}`,
                yaxis: 'y',
                orientation : 'h',
                cliponaxis: true,
                visible: this.order.asks.visible,
                opacity: this.order.asks.opacity,
                line: {
                    color: this.order.asks.color,
                    width: this.order.asks.width,
                }
            },{
                id: this.id,
                name: 'bids',
                x: this.kl.depth.bids.acum,
                y: this.kl.depth.bids.y,
                type: 'scatter',
                fill: 'tozerox',
                mode: 'lines',
                hoverinfo: 'skip',
                xaxis:`x${this.xaxi}`,
                yaxis: 'y',
                orientation: 'h',
                visible: this.order.bids.visible,
                opacity: this.order.bids.opacity,
                line: {
                    color: this.order.bids.color,
                    width: this.order.bids.width,
                }
            }])

            addEventListener('depthUpdate', this.onupdate)

            resolve()
        })
    }

and this part of the code is the one that allows you to change the type of graph

reload() {
        return new Promise(resolve => {
            var data = {}

            for(const order in this.order) {
                if(this.acum)
                    data = {
                        x: [this.kl.depth[order].acum],
                        y: [this.kl.depth[order].y],
                        type: 'scatter',
                        fill: 'tozerox',
                        mode: 'lines',
                        visible: this.visible && this.order[order].show,
                        opacity: this.order[order].opacity,
                        line: {
                            color: this.order[order].color,
                            width: this.order[order].width
                        }    
                    }
                else
                    data = {
                        x: [this.kl.depth[order].x],
                        y: [this.kl.depth[order].y],
                        type: 'bar',
                        fill: 'none',
                        mode: 'marker',
                        visible: this.visible && this.order[order].show,
                        marker: {
                            color: this.order[order].color,
                            opacity: this.order[order].opacity
                        }    
                    }
               
                this.traceindex = this.kl.gettraceindex(this.id, order)
               
                Plotly.update(this.kl.layer, data, {}, this.traceindex)
            }           

            this.updateRangeX()

            Plotly.update(this.kl.layer, {},
            {
                'xaxis.type': 'date',
                'xaxis.range': this.kl.range.x,
                'yaxis.range': this.kl.range.y,
                [`xaxis${this.xaxi}.range`]: this.range.x
            })

            resolve()
        })
    }

I appreciate your help