How to set months of the last year in highcharts?

Question

I need chart which ends in the current month (July). Ticks should be set each 3 months. But now my chart requires pointStart, which limits time from october 2022 to july 2023 (date should be limited only by july 2023). Also not all of my points are displayed (chart misses 4 last values).

https://jsfiddle.net/njmb7uoL/

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%b',
            year: '%b'
        },
        max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 1),
    },
    plotOptions: {
        series: {
            pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - 9),
            pointInterval: 3,
            pointIntervalUnit: 'month',
        },
    },
    series: [{
        name: 'Moose',
        data:
            [
                38000,
                37300,
                37892,
                38564,
                68767,
                73464,
                83748,
                34343,
            ]
    }, {
        name: 'Deer',
        data:
            [
                22534,
                23599,
                24533,
                25195,
                45454,
                74657,
                32432,
                34343,
            ],
          
    }]
});

what I want to get:

Answer 1

The following example should basically do it: The end of the interval is the current month, which is July 2023. The start of the interval is determined by the length of the data (first column), such that e.g. with the provided example the begin is at the end of November 2022.

let srs = [
  [
    38000,
    37300,
    37892,
    38564,
    68767,
    73464,
    83748,
    34343,
  ],
  [
    22534,
    23599,
    24533,
    25195,
    45454,
    74657,
    32432,
    34343,
  ]
];


let chart = Highcharts.chart('container', {
  chart: {
    type: 'areaspline'
  },
  xAxis: {
    tickInterval: 90 * 24 * 3600 * 1000, // 3 months
    //startOnTick: true,
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%b',
      year: '%b'
    },
    max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 3),
  },
  plotOptions: {
    series: {
      pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - srs[0].length + 1),
      pointInterval: 1,
      pointIntervalUnit: 'month',
    },
  },
  series: [{
    name: 'Moose',
    data: srs[0]
  }, {
    name: 'Deer',
    data: srs[1],
  }]
});

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This demo shows a smoothed area chart with an x-axis plot band
        highlighting an area of interest at the last two points. Plot bands
        and plot lines are commonly used to draw attention to certain areas or
        thresholds.
    </p>
</figure>