plotly rangeselector and rangeslider not showing

[nguyenanht]

I am trying to display plotly rangeselector and rangeslider in my angular app.

I want to have slider below like this : https://plotly.com/javascript/range-slider/
but it is not showing.
See my screenshot there

I am using "plotly.js": "^2.8.3" and "angular-plotly.js": "^4.0.4",

Here is my code :

dashboard.component.html

<plotly-plot
    *ngIf="graph"
    [data]="graph.data"
    [layout]="graph.layout"
    [useResizeHandler]="true">
</plotly-plot>

dashboard.component.ts

this.graph = {
  data: newArr,
  layout: {
    barmode: 'stack',
    xaxis: {
      rangeselector: {
        buttons: [{
          step: 'month',
          stepmode: 'backward',
          count: 1,
          label: '1m'
        }, {
          step: 'month',
          stepmode: 'backward',
          count: 6,
          label: '6m'
        }, {
          step: 'year',
          stepmode: 'todate',
          count: 1,
          label: 'YTD',
        }, {
          step: 'year',
          stepmode: 'backward',
          count: 1,
          label: '1y'
        }, {
          step: 'all',
          // active: true
        }],
      },
      rangeslider: {
        visible: true
      },
      type: 'date'
    },
};

I don't know what is wrong there.

Thanks for your help.