Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove Modebar and scrollzoom in angular plotlyjs

I am trying to remove the modebar and scrollzoom in my plotly plot while using angular. I know how to remove them in python but unable to do so in the below code. Any help is much appreciated.

import { Component } from '@angular/core';

@Component({
    selector: 'plotly-example',
    template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
})
export class PlotlyExampleComponent {
    public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };
}
like image 661
Jai Avatar asked Sep 19 '25 02:09

Jai


1 Answers

Add

graph = {
  ...
  config: {
    displayModeBar: false  
  }
}

and

<plotly-plot [data]="graph.data" [layout]="graph.layout" [config]="graph.config"></plotly-plot>
like image 61
mit Avatar answered Sep 22 '25 12:09

mit