Extent seems to have no effect on timeseries chart

[Maxhou00]

Description

Hello,

I have a "timeseries" chart with data from 1985 to 2024. I want to show as default view only the data from the last 10 years (2014 to 2024).
I tried using the axis.x.extent option and the zoom.extent option with an array of date but nothing happens.

The work around is to do after generating the chart chart.zoom(['2014-01-01', '2024-01-01'] but this isn't really what I want.

Steps to check or reproduce

Here is a simple example that show nothing happens with the axis.x.extent options

// base css
import 'billboard.js/dist/theme/insight.css';
import bb from 'billboard.js';
import * as d3 from 'd3';

// for ESM environment, need to import modules as:
// import bb, {area, zoom} from "billboard.js"

var chart = bb.generate({
  data: {
    x: 'x',
    json: {
      Temperature: [
        '29.39',
        '29.7',
        '29.37',
        '28.87',
        '28.62',
        '27.72',
        '27.61',
        '27.82',
        '27.48',
        '26.78',
        '26.62',
        '26.64',
        '26.29',
        '26.01',
        '25.84',
        '25.07',
        '24.85',
        '24.01',
        '23.83',
        '22.8',
        '23',
        '22.64',
        '22.77',
        '22.64',
        '22.64',
        '22.62',
        '22.51',
        '21.42',
        '21.18',
        '20.93',
        '20.66',
        '20.48',
        '20.7',
        '21.24',
        '22.14',
        '22.78',
        '23.43',
        '23.16',
        '27.48',
        '26.78',
        '26.62',
        '26.64',
        '26.29',
        '26.01',
        '25.84',
        '25.07',
        '24.85',
        '24.01',
      ],
      x: [
        '2015-01-01',
        '2015-02-01',
        '2015-03-01',
        '2015-04-01',
        '2015-05-01',
        '2015-06-01',
        '2015-07-01',
        '2015-08-01',
        '2015-09-01',
        '2015-10-01',
        '2015-11-01',
        '2015-12-01',
        '2016-01-01',
        '2016-02-01',
        '2016-03-01',
        '2016-04-01',
        '2016-05-01',
        '2016-06-01',
        '2016-07-01',
        '2016-08-01',
        '2016-09-01',
        '2016-10-01',
        '2016-11-01',
        '2016-12-01',
        '2017-01-01',
        '2017-02-01',
        '2017-03-01',
        '2017-04-01',
        '2017-05-01',
        '2017-06-01',
        '2017-07-01',
        '2017-08-01',
        '2017-09-01',
        '2017-10-01',
        '2017-11-01',
        '2017-12-01',
        '2018-01-01',
        '2018-02-01',
        '2018-03-01',
        '2018-04-01',
        '2018-05-01',
        '2018-06-01',
        '2018-07-01',
        '2018-08-01',
        '2018-09-01',
        '2018-10-01',
        '2018-11-01',
        '2018-12-01',
      ],
    },
    type: 'area', // for ESM specify as: area()
  },
  axis: {
    x: {
      tick: {
        fit: false,
        count: 5,
      },
      type: 'timeseries',
      extent: ['2016-01-01', '2018-12-01'],
    },
  },
  zoom: {
    enabled: true,
    rescale: true,
    type: 'drag', // for ESM specify as: zoom()
  },
  tooltip: {
    format: {
      title: function (x) {
        return d3.timeFormat('%Y-%m-%d')(x);
      },
    },
  },
  point: {
    focus: {
      only: true,
    },
  },
  bindto: '#xAxisTickTimeseries',
});

Here is a stackblitz of the example you can try